加了 filter 的元素会自动成为新的层叠上下文根节点，其 z-index 仅在内部生效，无法与外部元素比较层级；常见于弹窗被带 filter 的卡片遮挡，即使弹窗 z-index 更高也无效。
加了 filter 的元素会自动变成新的层叠上下文根节点，它的 z-index 就不再和外部元素“同台竞技”——不是数值不够大，而是压根没进同一个擂台。
为什么 z-index 看似“失效”了
filter 值只要不是 none（哪怕 filter: blur(0) 或 filter: opacity(1)），浏览器就会隐式创建一个新的层叠上下文。此时该元素及其所有子元素的 z-index 只在它内部生效，无法和兄弟、父级甚至 position: fixed 的导航栏比高低。
- 常见现象：弹窗被带
filter的卡片盖住，检查发现弹窗z-index: 9999，卡片只有z-index: 10 - 根本原因：卡片自己成了层叠上下文，弹窗和它不在同一层级体系里
- 连带影响：即使卡片只是祖父节点，只要中间某一级用了
filter，就可能传导干扰
怎么快速定位是哪个 filter 在“结界”
打开 Chrome DevTools → 选中被遮挡的元素 → 切到 «Computed» 面板：
- 搜索
filter，看它自身或各级父元素是否设置了非none值 - 同步搜
stacking context，找到第一个标有 “This element establishes a stacking context” 的祖先 - 点开它的 Computed 样式，确认
filter、opacity、transform或will-change是否在起作用 - 临时在 Styles 面板里取消勾选该父元素的
filter，如果遮挡立刻消失，问题坐实
不删 filter 怎么让元素“破壁而出”
保留视觉效果的同时绕过层叠隔离，关键不是堆数字，而是调整结构归属：
- 把需要“突围”的元素（如下拉菜单、Tooltip）用
position: fixed提到下，并用 JS 动态计算top/left（注意滚动和缩放偏移） - 若整个容器必须加
filter（比如毛玻璃背景），就把容器本身设为position: relative+ 足够高的z-index（例如z-index: 100），让它整体抬高，而不是在内部调子元素的z-index - 对
backdrop-filter场景，改用伪元素隔离：.glass::before承载backdrop-filter并设z-index: -1，真实内容层设z-index: 1以上且显式定位 - 避免用
filter: blur(0)当占位符——它和blur(1px)对层叠上下文的影响完全一致
真正难处理的不是单个 filter，而是它藏在 DOM 深处某个不起眼的祖先上，比如祖父节点的 filter: drop-shadow(0 0 0 #000)，表面看不出变化，却悄悄锁死了整棵子树的层级自由度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
