fixed元素随滚动是因祖先设置了transform等属性，导致创建新包含块而退化为相对定位；应通过devtools逐层检查computed值定位问题源，优先用dom结构调整（如挂载到body）或改用sticky替代。
fixed 元素随页面滚动，不是你代码写错了，而是它已经被“劫持”了定位上下文——只要任意祖先元素设置了 transform、filter、opacity（小于 1）、will-change 或 backdrop-filter，position: fixed 就会退化为相对该祖先定位，而非视口。
为什么 fixed 会变成 relative to 祖先？
CSS 规范明确要求：这些属性会创建新的包含块（containing block）和层叠上下文。一旦发生，fixed 元素就不再锚定视口，而是锚定这个新包含块——这是标准行为，不是浏览器 bug。
- 常见触发属性包括：
transform: translateZ(0)、transform: scale(1)、filter: blur(0)、opacity: 0.99、will-change: transform - 第三方 UI 库（如 Ant Design Drawer、Element Plus Dialog）常默认加
transform: translateZ(0)来启用硬件加速，你没写，但它写了 - iOS Safari 中
overflow-scrolling: touch也会被等效为transform触发条件
怎么快速定位是哪一层搞的鬼？
别猜，用 Chrome DevTools 实锤：
- 选中那个“乱跑”的
fixed元素 - 按住 Shift 连续点右上角箭头，逐层跳转父节点
- 每到一层，切到 Computed 标签页，搜索
transform、filter、opacity、will-change - 只要某层的
transform不是none，问题就出在这儿
修复方案不能只靠 transform: none !important
临时加 transform: none !important 能验证问题，但绝不能当最终解法——它可能破坏动画、滚动性能，或让第三方组件弹窗失灵。
- 真正稳的解法是 DOM 结构调整：把
fixed元素移出有问题的祖先树，比如用createPortal渲染到document.body下 - 纯 HTML 就手动把
<div class="fixed-btn"> 拖到 <code>底部 - 确保样式不依赖原层级，比如把
.modal .fixed-btn改成独立类名.global-fixed-btn - 显式设高
z-index（如z-index: 2147483647），避免被其他body子元素遮挡
移动端真机测试比模拟器关键
缩放 + 键盘弹出 + 横竖屏三者叠加时，fixed 最容易暴露问题。模拟器里看着好好的，真机一输文字键盘弹起，fixed 就偏移或消失——这说明你还没覆盖所有触发路径。
尤其注意全局 JS 缩放方案（如动态设置 #scale-box 的 transform: scale()），它会静默污染整个子树，连 document.body 下的 fixed 都逃不掉。
