filter非none会强制创建新包含块和层叠上下文，使fixed/absolute元素定位基准退化为该filter容器；唯html上filter例外，不触发此行为。
filter 非 none 会强制创建新包含块和新层叠上下文，让 position: fixed 和 position: absolute 的定位基准从视口/文档根节点，退化为该 filter 容器 —— 这不是 bug，是 CSS 规范明确要求的行为。
为什么 fixed 元素突然“粘”在父容器上？
因为浏览器只要检测到任意祖先元素的 filter 计算值不为 none（哪怕只是 filter: blur(0) 或 filter: opacity(.99)），就会立即为它创建一个新的包含块（containing block）和新的层叠上下文（stacking context）。
此时 position: fixed 不再以视口为锚点，而是以这个 filter 容器为锚点 —— 效果等同于 position: absolute；z-index 也只在该容器内生效，无法和外部兄弟元素比高低。
- 常见现象：右上角弹窗被导航栏盖住，而导航栏恰好套在
filter: drop-shadow()的 wrapper 里 - 快速验证：DevTools → Computed → 搜
filter，再往下找Stacking Context，显示Yes就坐实了 - 别信
* { filter: unset }——unset对filter无效，必须显式写filter: none
为什么把 filter 放到 html 上就没事？
CSS 规范（[Filter Effects Level 2](https://drafts.fxtf.org/filter-effects/#FilterProperty)）特别说明：filter 作用于根元素 时，**不会为后代的 fixed 或 absolute 元素创建新包含块**。
这是唯一被规范豁免的例外场景 —— 因为根元素的渲染语义决定了它不能成为“局部定位锚点”。
- 错：
body { filter: grayscale(1); }→ 所有后代fixed全部退化 - 对：
html { filter: grayscale(1); }→ 视觉效果不变，fixed仍锚定视口 - 注意前提：若
html自身已有transform或backdrop-filter，那它自己已成污染源，移 filter 也没用
实在不能动父级 filter 怎么办？
当 filter 来自第三方组件、微前端主应用或不可修改的 UI 库时，DOM 结构和渲染链路才是突破口。
- Vue：用
<teleport to="body"></teleport>把需要fixed的元素提到下，彻底脱离污染链 - React：用
createPortal做同样事，确保其父级是干净的 - CSS 替代：把
filter挪到伪元素（如::before）上，本体保持无样式，再靠z-index分层控制视觉顺序 - 慎用
transform: translateZ(0)强提层 —— 它自己就是同类触发器，可能引发二次冲突
真正难处理的从来不是单个 filter，而是多层嵌套中多个框架共用 DOM 树时，谁有权决定包含块 —— 那时候问题已经不在 CSS，而在协作边界是否清晰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
