按钮用 position: fixed 仍随滚动移动，是因为祖先元素设置了 transform、perspective 或 filter，创建了新的包含块，使 fixed 退化为相对该祖先定位；需检查 computed 样式并逐级排查。
按钮用 position: fixed 后仍随滚动移动？检查父容器是否截断了定位上下文
直接给按钮加 position: fixed 却没效果，大概率是它被某个祖先元素“框住”了。CSS 规范里明确写了：fixed 元素本该相对于视口定位，但如果其某个祖先设置了 transform、perspective 或 filter（哪怕值是 none），就会创建新的“包含块”，导致 fixed 退化为相对该祖先定位——看起来就像没固定一样。
- 用浏览器开发者工具选中按钮，看 computed 样式里
position是否真为fixed，再往上逐级检查transform和filter - 常见“凶手”：外层
div加了transform: translateZ(0)做硬件加速，或用了filter: drop-shadow() - 临时排查法：给疑似问题祖先加
transform: none !important，看按钮是否立刻归位
移动端 iOS 上 fixed 按钮跳动或错位？别只靠 top/bottom
iOS Safari 对 fixed 的实现有历史包袱，尤其在页面有软键盘弹出、地址栏缩放或滚动惯性未停稳时，top 和 bottom 值可能被错误计算，导致按钮突然上移或下移一截。
- 优先用
bottom+right（比如返回顶部按钮）或top+left（比如导航菜单），避免混用top和bottom同时设值 - 加一层防抖：用
window.visualViewport?.offsetTop动态修正top，但注意仅限 iOS 15+；老版本只能靠setTimeout延迟重置 - 测试时务必真机操作——模拟器常掩盖此问题
禁止滚动时按钮消失或错位？overflow: hidden 会干扰 fixed 元素渲染
很多人想“锁住页面”就给 body 加 overflow: hidden，结果发现 fixed 按钮不见了，或者位置偏移。这是因为部分浏览器（尤其是旧版 Android Webview）在 overflow: hidden 下会错误重置 fixed 元素的包含块。
- 正确做法：禁止滚动时，改用
document.body.style.position = 'fixed'+document.body.style.top = `-${window.scrollY}px`，而不是依赖overflow - 如果必须用
overflow: hidden，记得同时给按钮加z-index: 9999并确认其父级没设overflow: hidden - 更稳妥的组合：禁滚动时，把按钮从
body直接挂到document.documentElement下（即 `html>` 根节点），彻底脱离 body 流
z-index 设很高却还是被遮挡？层级关系比数值更重要
写 z-index: 999999 没用，是因为 fixed 按钮和遮罩层不在同一“堆叠上下文”里。只要按钮的某个祖先（比如弹窗容器）设了 z-index，它就会创建新上下文，按钮的 z-index 只在这个小范围内生效。
- 用开发者工具的“Layers”面板（Chrome）或“Computed”里的“Stacking context”查看按钮是否被包裹进低层级上下文
- 确保按钮直接挂在
body下，或至少它的最近一个有z-index的祖先，z-index值高于遮罩层的对应祖先 - 不要迷信大数字——
z-index: 2的按钮，只要其祖先的z-index高于遮罩层祖先，就能盖过z-index: 999的遮罩
fixed 按钮失效往往不是写法错了，而是被隐藏的 CSS 层级或移动端渲染机制卡住了。先查祖先的 transform，再验 iOS 渲染时机，最后理清 z-index 的作用域——这三步走完，90% 的“不固定”问题就解了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
