fixed定位失效主因是父元素设置了transform、filter、opacity
fixed定位突然失效，先查父元素有没有transform
当position: fixed元素不再贴浏览器视口边缘，而是随滚动一起动，大概率是它的某个祖先元素设置了transform（哪怕只是transform: translateZ(0)）。CSS规范规定：只要任意父级有非none的transform、filter、opacity（小于1）、will-change等属性，就会创建新的**包含块（containing block）**，此时fixed就不再相对于视口定位，而是相对于这个新包含块——效果等同于position: absolute。
排查建议：
- 用浏览器开发者工具逐层向上检查
computed面板，看哪一层的transform值不是none - 重点关注那些“看似没动但加了硬件加速”的写法，比如
transform: translateZ(0)、transform: scale(1) - 临时移除父级
transform或改用transform: none验证是否恢复
filter也会让fixed失效，哪怕只是blur(0)或opacity(.99)
filter和transform一样，会触发新的层叠上下文和包含块。即使写的是filter: blur(0)或filter: opacity(1)（注意：标准里opacity本身不算filter，但filter: opacity(1)是无效语法；真正危险的是filter: opacity(.99)或任何非空值），只要计算后不为none，就会破坏fixed的定位基准。
常见踩坑点：
- 全局CSS重置里写了
* { filter: unset }？别信，unset对filter不生效，得用filter: none - 第三方UI库（如某些弹窗组件）内部加了
filter: drop-shadow(...)，可能悄悄影响到你外层的fixed导航栏 -
backdrop-filter同样会触发新包含块，别只盯着filter
替代方案：不用fixed也能实现“视觉固定”效果
如果无法移除父级transform或filter（比如动画必须依赖它们），就得绕开fixed本身：
- 改用
position: sticky+ 足够高的top值（如top: -100vh），再配合overflow-anchor: none减少跳动 - 监听
scroll事件，用getBoundingClientRect()动态计算并设置top/left（注意节流） - CSS
contain: layout paint对父级无效，但可加在fixed子元素上避免重排干扰——不过这不解决包含块问题，仅作性能补充
真正难处理的是嵌套很深、且多个框架共用同一DOM树的场景，比如微前端里主应用加了transform，子应用又挂了个fixed按钮——这时候得协商层级或改用body级插入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
