因为filter（即使filter: blur(0)或opacity(.99)）会强制创建新包含块，使fixed子元素不再相对于视口定位，而是相对于该带filter的祖先元素；Computed面板中Containing Block字段可验证，唯一安全值是filter: none。
为什么加了 filter 的父元素会让子元素 fixed 失效
因为 filter（哪怕只是 filter: blur(0) 或 filter: opacity(.99)）会强制创建新的**包含块（containing block）**，使子元素的 position: fixed 不再相对于视口，而是相对于这个带 filter 的祖先元素——效果等同于 position: absolute。
这不是 bug，是 CSS 规范明确行为：任何非 none 的 filter 值都会触发新层叠上下文和新包含块。即使你只给一个卡片容器加了 filter: drop-shadow(0 2px 4px rgba(0,0,0,.1))，它内部所有 fixed 子元素（比如悬浮按钮、返回顶部）都会“被拉下来”跟着这个卡片滚动。
- 用 DevTools 打开该
fixed元素，在 Computed 面板里直接看Containing Block字段，它大概率指向那个带filter的父级 -
filter: none是唯一安全值；filter: unset或filter: initial不生效，别信 - 第三方 UI 库（如某些弹窗组件）常悄悄加
filter做阴影，可能跨层级影响你外层的导航栏
哪些 filter 值会触发这个问题
只要最终计算值不是 none，就危险。常见但容易被忽略的包括：
-
filter: blur(0.1px)（单位不能少，blur(0)合法但仍是非none） -
filter: opacity(.99)（注意：这不是opacity属性，而是filter函数里的 opacity） -
filter: saturate(100%)、filter: grayscale(0)—— 数值为 0 或 1 不代表“无效果”，只要写进去了就算激活 -
backdrop-filter: blur(1px)同样触发，别只盯着filter
特别提醒：filter: url(#svg-filter) 也属于非 none，一样破坏 fixed 定位基准。
立即学习“前端免费学习笔记（深入）”；
怎么快速验证是不是 filter 搞的鬼
不用猜，三步定位：
- 在 DevTools 中选中出问题的
fixed元素，打开 Computed 面板，搜索filter，看哪一层的filter计算值不是none - 临时给疑似父级加
filter: none !important，刷新看fixed是否恢复贴视口 - 若恢复，说明就是它；此时不要直接删掉原
filter（可能影响视觉），优先考虑绕过方案
注意：有些框架或构建工具会自动注入 filter: var(--some-filter)，变量为空时也可能被解析为非 none，得看 computed 值。
绕过 filter 干扰的实操方案
改父级样式常牵一发而动全身，更稳妥的是让 fixed 元素“逃出来”：
- Vue 项目用
<Teleport to="body">把元素挂到<body>下，彻底脱离干扰链 - React 项目用
createPortal同理，确保 DOM 位置在 body 最外层 - 纯 HTML/CSS 场景可手动把该元素移出有
filter的 DOM 树，用 JS 插入document.body末尾，并加position: fixed+ 显式z-index - 慎用
position: sticky替代：设top: -100vh+overflow-anchor: none，但滚动锚点行为在 Safari 下仍不稳定
真正难处理的是微前端或多框架嵌套场景——主应用加了 filter，子应用又依赖 fixed，这时候 DOM 层级协商比硬调样式更有效。
