fixed元素相对于父容器定位不是bug，而是CSS规范行为：当祖先元素设置transform、filter、opacity
fixed 元素“跟着父元素滚动”，不是 bug，而是父容器创建了新的 containing block —— 最常见原因是它设置了 transform、filter、opacity 或 will-change。
为什么 fixed 会相对于父容器定位而不是视口
规范明确要求：当祖先元素触发了“层叠上下文 + 新包含块”时，position: fixed 的定位基准就从视口降级为该祖先。这不是浏览器兼容问题，而是所有现代浏览器（Chrome/Firefox/Safari/Edge）统一实现的行为。
关键诱因包括：
-
transform: translateZ(0)（常被用作硬件加速“开关”，但会悄悄破坏 fixed） -
filter: blur(0)或任何非none值 -
opacity: 0.99（哪怕只差 0.01，也会触发） -
will-change: transform或will-change: scroll-position -
perspective: 1px等 3D 相关属性
这些属性本身不改变布局，但会强制浏览器新建一个定位上下文——于是子元素的 fixed 就只能“固定”在这个新上下文里，看起来就像被父容器“吸住”了。
立即学习“前端免费学习笔记（深入）”；
如何快速定位是哪个父元素在干扰
打开 DevTools，选中那个“不固定”的元素，然后逐层向上检查每个祖先节点的 computed styles，重点关注以下几项是否非默认值：
-
transform≠none -
filter≠none -
opacity -
will-change包含transform、scroll-position或opacity -
perspective已设置
一旦发现某层满足任一条件，临时在 Styles 面板中勾掉它，观察 fixed 元素是否立刻回到视口左上角——基本就能锁定根因。
修复 fixed 失效但又不能删父样式怎么办
如果父容器的 transform 或 filter 是业务必需（比如动效、毛玻璃背景），不能直接移除，那就得绕开这个限制：
- 把 fixed 元素**移出该父容器 DOM 树**，挂到
下（例如用 React Portal 或 Vue Teleport） - 改用
position: sticky+top: 0，适用于需要“滚动到某位置才固定”的场景 - 用 JS 监听
scroll，动态计算视口坐标并设position: absolute+left/top（慎用，注意节流和 iOS 滚动延迟） - 避免在 fixed 元素的任意祖先上使用
transform，哪怕只是scale(1)或translateX(0)
不要试图用 backdrop-filter 或 z-index 强行覆盖——它们不解决定位基准问题，只会让遮挡或层级更难调试。
真正容易被忽略的是：哪怕你没写 transform，某些 UI 库、动画框架或 CSS-in-JS 工具会在运行时注入 transform: translateZ(0) 来启用 GPU 加速。这种“隐身 transform”必须靠 DevTools 的 computed styles 才能揪出来。
