filter会让fixed元素“粘”在父容器上，是因为filter非none时浏览器创建新包含块，使fixed退化为relative视口的absolute；同理，transform、backdrop-filter、perspective、will-change等也会触发该行为。
为什么filter会让fixed元素突然“粘”在父容器上？
因为filter值不为none时，浏览器会为该元素创建新的包含块（containing block），而position: fixed不再以视口为基准，转而相对于这个新包含块定位——效果等同于position: absolute。哪怕只是filter: blur(0)或filter: opacity(1)（注意：后者语法非法，但filter: opacity(.99)就足够触发）也会生效。
哪些父级样式会悄悄改掉fixed的定位基准？
除了filter，以下任意一个在祖先链上出现，都会让fixed退化：
-
transform值不是none（含translateZ(0)、scale(1)这类“无感”写法） -
backdrop-filter非none -
perspective非none -
will-change声明了任何属性 -
contain: paint或contain: layout paint
把filter移到html上真能解决问题？
能，而且是最轻量的修复方式——因为规范明确指出：filter作用在根元素时，不会为子级的fixed或absolute创建新包含块。
- 错：
body { filter: grayscale(1); }→ 会污染所有后代fixed元素 - 对：
html { filter: grayscale(1); }→ 视觉效果不变，fixed仍锚定视口 - 注意：如果页面已有
html上设了transform或backdrop-filter，那它本身就成了新包含块，此时移filter也没用
实在没法动父级样式？试试teleport或伪元素绕行
当父组件由第三方库控制（比如弹窗外壳加了backdrop-filter），或微前端中主应用强加了transform，直接改CSS不可行时，得从DOM结构入手：
- Vue场景下，用
<teleport to="body"></teleport>把fixed元素挂到下，彻底脱离污染链 - React可用
createPortal做同样事 - CSS方案：把
backdrop-filter挪到伪元素::before上，本体保持“干净”，再用z-index分层控制显示顺序 - 慎用
transform: translateZ(0)强行提层——它自己就是问题源头之一，可能引发新冲突
真正难处理的是多层嵌套+多框架共用DOM的场景，这时候定位基准已经不是“有没有filter”的问题，而是“谁有权决定包含块”的权限问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
