filter非none会强制创建新包含块和层叠上下文，使fixed元素定位基准从视口变为该容器，z-index作用域被截断，修复应优先抽离滤镜至伪元素或挂载到body。
filter非none会强制创建新包含块，fixed定位基准从视口变成父容器
只要任意祖先元素的 filter 计算值不是 none（哪怕只是 filter: blur(0)、filter: opacity(.99) 或 filter: drop-shadow(0 0 0 #000)），浏览器就必须按 CSS 规范创建新的**包含块（containing block）** 和**层叠上下文（stacking context）**。此时 position: fixed 元素不再相对于视口定位，而是相对于这个 filter 容器——视觉上就像“被框住”，随页面滚动偏移。
- Chrome DevTools 的 Computed 面板里搜
containing block，能看到实际定位基准已变为该容器 -
filter: opacity(1)是非法语法，但部分浏览器 fallback 后仍触发上下文，不可依赖 -
backdrop-filter同样触发，且更隐蔽：它不依赖父元素是否设position，只要存在就生效
z-index在filter容器内“失效”不是数值不够，是作用域被截断
filter 创建的层叠上下文是个“结界”。子元素的 z-index 只在内部有效，无法和外部同级元素比高低。比如一个弹窗设了 z-index: 9999，却被隔壁卡片（z-index: 10）盖住，大概率就是卡片父容器开了 filter。
- 给子元素狂加
z-index: 2147483647没用——它出不去这个上下文 - filter 容器自身若没设
position: relative/absolute/fixed，它的z-index根本不生效，别白费劲 - 检查祖先链中是否有其他
transform、will-change或opacity ，它们会叠加干扰
修复方案优先级：隔离滤镜作用域，而非硬调z-index
直接对容器设 filter 是最危险的做法。安全做法是把滤镜“抽离”到伪元素上，让结构层级不受污染。
- 用
::before或::after承载滤镜：.glass::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(6px); z-index: -1; } - 确保容器本身设
position: relative，否则伪元素无法准确定位 - 需要
fixed的子元素（如关闭按钮）必须显式声明position: fixed+z-index，且确认其 DOM 祖先链中无其他filter或transform - 若无法改结构，用
createPortal（React）或document.body.append(el)（原生）把元素挂到下，是最稳的兜底方式
容易被忽略的细节：html vs body、移动端 Safari 的特殊表现
如果全局滤镜写在 body 上（比如 body { filter: grayscale(1); }），所有 fixed 元素都会被拖进它的包含块。这种情况下，把 filter 移到 html 元素上反而能恢复 fixed 对视口的参照——因为 html 的包含块就是视口本身。
- iOS Safari 中，
fixed元素若自身或祖先有transform+filter组合，z-index 可能完全失效，连2147483647都压不住系统 UI - 第三方组件（如 Ant Design 的
Drawer）常默认加filter: drop-shadow()，你没写 ≠ 它没加；务必用 Computed 面板逐层验证 - 不要信
* { filter: unset }——unset对filter不生效，必须显式写filter: none
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
