轮播按钮定位失效主因是父容器未设position: relative，导致绝对定位按钮参考viewport而偏移；需确保按钮为容器直接子元素、避免transform等创建新containing block，并用transform: translateY(-50%)垂直居中，padding扩大热区、z-index提升层级、touch-action优化移动端交互。
轮播按钮位置飘了，八成是父容器没设 position: relative
绝对定位按钮（.prev/.next）一旦“飞出可视区”或点击无效，90% 是因为最外层轮播容器（比如 .carousel）没加 position: relative。浏览器会逐级向上找最近的定位祖先，找不到就 fallback 到 viewport，按钮直接贴左上角或消失在屏幕外。
必须确保：
- 按钮是该容器的**直接子元素**，或至少同级嵌套内（不能跨多层 DOM 放到
body下） - 容器上没有意外的
transform、perspective或filter—— 这些会创建新的 containing block，让position: absolute参考错对象 - 用开发者工具检查按钮的 computed
position和offsetParent，确认它真正在“认”那个容器
左右按钮垂直居中总偏一点？别只靠 top: 50%
top: 50% 只把按钮上边缘拉到容器中线，不处理自身高度。视觉上永远偏低，尤其图标尺寸小的时候更明显。
稳妥写法是组合使用：
立即学习“前端免费学习笔记（深入）”；
- 左按钮：
left: 12px; top: 50%; transform: translateY(-50%) - 右按钮：
right: 12px; top: 50%; transform: translateY(-50%) -
left: 0或right: 0看似省事，但容易贴边——手指点不准，iOS Safari 还可能触发“返回上一页”手势 - 务必加
z-index: 10或更高，否则轮播图内容（尤其是带transform的图片层）可能盖住按钮
移动端点不到按钮？热区和视觉尺寸得分开管
默认图标 24×24px，手指根本点不准。光放大图标或字体，会破坏 UI 比例；只调 font-size 或 width/height，又容易让点击区域变小。
正确做法是解耦视觉与可触达区域：
- 用
padding扩大点击热区（比如padding: 12px），保持图标本身尺寸不变 - 加
cursor: pointer（PC 端防文字选中，也提供反馈） - iOS Safari 上补一句
touch-action: manipulation，避免滚动时误触发 - 真机测试时，临时加
background: rgba(255,0,0,0.2)看实际热区是否覆盖预期范围
按钮跟着轮播图一起滑动？小心 transform 层级污染
如果轮播图内部用 transform: translateX() 切换，而包裹按钮的那层（比如 .carousel）也加了 transform: translateZ(0)，就会创建新定位上下文——按钮的 position: absolute 就变成相对这个 transform 容器定位，而不是原始父容器。
排查方法很简单：
- 临时给按钮加
background: red; border: 2px solid blue - 手动切换轮播项，看按钮是否位移：动了，说明参考系错了
- 修复方式：把
transform移到更内层（如.carousel-track），别让它出现在按钮的任意祖先链上 - 检查
transform-style和will-change是否意外影响了定位上下文链
transform 层级污染、还有移动端点击热区和视觉尺寸的分离处理——这三处一漏，调试起来比重写逻辑还费时间。 
