按钮定位失效的根本原因是定位参考系错乱，需确保父容器设position: relative、避免transform等意外创建层叠上下文，并严格控制z-index、触控热区与键盘焦点顺序。
按钮定位不是“调个 left top 就完事”，真正卡住人的，是定位参考系错乱、滚动后偏移、移动端点击热区不足、键盘焦点断链——这些才是线上项目里高频报障的原因。
为什么按钮总飘到页面左上角？
这是 position: absolute 最典型的失效现场：只给按钮设了 position: absolute，但它的直接父容器没设 position: relative（或 absolute/fixed）。浏览器会逐层往上找「最近的已定位祖先」，最终落到 上，于是所有 top/left 都以视口左上角为原点计算。
- 必须用一个明确的包裹容器（比如
<div class="btn-wrapper">）同时包住按钮和它要对齐的元素（如图片、标题）<li>这个容器要设 <code>position: relative，且不能被transform、will-change或overflow: hidden意外截断定位上下文 - 按钮本身不要设
position: relative——它只是子元素，不是锚点 - 如果父容器是
flex或grid，确认它没隐式创建新层叠上下文（例如加了transform: translateZ(0)） - 幻灯片容器必须设
position: relative - 左按钮用
position: absolute; top: 50%; left: 16px; transform: translateY(-50%)，右按钮对称写right: 16px - 按钮最小尺寸设为
44px × 44px（WCAG 推荐触控热区），用padding而非仅靠width/height控制 - 移动端必须加
touch-action: manipulation，否则 Safari 可能拦截快速连点 - 键盘焦点顺序必须显式控制：
tabindex="0"给 prev 按钮，tabindex="-1"给 next（或反过来），别依赖 DOM 顺序 -
z-index值必须足够高（建议 ≥ 1000），但更重要的是检查它是否处于同一个层叠上下文里 - 如果按钮父容器有
transform、filter、will-change或opacity ，就会创建新层叠上下文，导致 <code>z-index在该上下文内重新计数 - 解决方法：把按钮提到
直接子级，或确保其祖先链上没有意外触发层叠上下文的属性 - 响应式要考虑：小屏时按钮可能挡住内容，用
@media (max-width: 768px)改为position: absolute+bottom: 20px并加margin-bottom: 80px预留空间 - 按钮外层必须包一层
<div class="tooltip-trigger">，并设 <code>position: relative—— 气泡的position: absolute必须基于它 - 箭头用伪元素实现时，
left: calc(50% - 6px)这类写法只适用于固定宽气泡；若气泡宽度动态（如文字换行），得用 JS 获取按钮getBoundingClientRect()后动态算偏移 - 禁止用
display: none切换气泡显隐——会导致重排闪动；改用opacity: 0; pointer-events: none; transform: scale(0.95)+transition - 点击外部关闭时，监听
document的click，但要用event.target.closest()排除按钮自身和气泡容器，否则点按钮会立刻关闭
怎么让按钮紧贴幻灯片边缘且垂直居中？
左右翻页按钮不是装饰，是核心交互入口。位置不准 = 用户找不到；热区太小 = 触屏点不中；焦点顺序乱 = 键盘用户直接失能。
悬浮按钮（fixed）被遮挡或滚动错位怎么办？
position: fixed 的按钮看似简单，实际最容易在复杂布局中“消失”——不是没写样式，而是被其他层叠上下文吞掉了。
气泡对话框跟着按钮跑、箭头不对齐？
气泡不是独立组件，它是按钮的视觉延伸。定位漂移、箭头偏斜、滚动后错位，90% 是因为没把定位参考系“钉死”。
定位的本质不是“把元素放哪儿”，而是“告诉浏览器以谁为基准、在什么上下文里算这个位置”。漏掉任何一个环节，都可能让按钮在某个设备、某种滚动状态、某次焦点切换时突然失效——而这种问题，往往要等用户反馈才暴露。
