轮播图前后按钮失效或错位的根本原因是父容器未设 position: relative，导致绝对定位按钮相对于 viewport 定位；须为最外层容器（如 .carousel）添加该样式，并确保按钮为其直接子元素或同级嵌套内，同时注意 transform 层级污染、移动端点击热区与视觉尺寸分离等问题。
轮播图前后按钮为什么点不了或位置飘了
因为父容器没设 position: relative，子按钮用 position: absolute 时会往上逐级找最近的定位祖先；找不到就相对于 viewport 定位，导致按钮飞出可视区或点击区域错位。
- 必须给轮播最外层容器（比如
.carousel）加position: relative - 按钮不能放在 body 或其他远亲容器里，得是该容器的直接子元素或至少同级嵌套内
- 如果用了 CSS-in-JS 或 Shadow DOM，要确认样式作用域是否覆盖到按钮和容器
左右按钮绝对定位的写法细节
用 left: 0 和 right: 0 最直接，但要注意按钮自身尺寸和留白——光靠定位不控制宽高，按钮可能被截断或重叠内容。
- 左按钮：加
left: 12px（别用0，防贴边难点击），top: 50%，transform: translateY(-50%) - 右按钮：加
right: 12px，同样top: 50%+transform: translateY(-50%) - 两个按钮都需设
z-index: 10（或更高），否则可能被轮播图图片盖住 - 避免用
margin-left: auto这类 flex 布局方式替代绝对定位，它在轮播切换动画中容易错位
移动端点击区域太小怎么办
默认按钮图标常只有 24×24px，手指点不准。CSS 不能只调图标大小，得扩大可点击区域，同时保持视觉不变。
- 给按钮加
padding: 16px（上下左右都留够），再用box-sizing: content-box防止撑大容器 - 图标用
font-size: 24px或width/height: 24px控制视觉尺寸，和 padding 分开管理 - 加
cursor: pointer和user-select: none，避免 PC 端误选文字或无反馈感 - 真机测试时注意 iOS Safari 对
touch-action: manipulation的兼容性，必要时加上
按钮被轮播图 transition 动画影响偏移
当轮播图内部用 transform: translateX() 切换时，若父容器也用了 transform（比如为了开启硬件加速），会创建新的 containing block，导致绝对定位按钮参考系改变。
立即学习“前端免费学习笔记（深入）”；
- 轮播图容器（如
.carousel-track）可以加transform: translateZ(0)，但不要加在包裹按钮的那层（.carousel）上 - 按钮层级必须高于轮播内容层，检查 computed styles 中的
transform-style和will-change是否意外影响定位上下文 - 简单验证方法：临时给按钮加
background: red和border: 2px solid blue，看它是否随轮播滑动——如果动了，说明定位参考错了
