filter不为none（如blur(0)）会隐式创建层叠上下文，使子元素z-index仅在该上下文中生效，无法与外部元素比较层级；需通过devtools检查stacking context定位源头，并提升父容器z-index或用portal脱离上下文。
filter 为什么会让 z-index 失效
因为 filter 不为 none（哪怕只是 filter: blur(0) 或 filter: opacity(1)）会**隐式创建新的层叠上下文**。一旦父元素触发了这个行为，它的所有子元素的 z-index 就只在该父级内部排序，无法和外部同级元素比高低。
常见现象包括：下拉菜单被隔壁卡片盖住、Tooltip 显示不全、弹窗遮罩层失效——而你检查时发现菜单本身 z-index: 9999，遮挡它的兄弟元素却只有 z-index: 10。
- Chrome DevTools 的 Computed 面板里搜
stacking context，如果显示 “This element establishes a stacking context”，说明它就是“结界”源头 -
filter: blur(0)和filter: drop-shadow(0 0 0 #000)同样危险，别以为值为 0 就安全 - Flex/Grid 容器加了
filter，其子项即使设了position: absolute+z-index，也出不了这个上下文
如何快速定位哪个 filter 在“截胡”z-index
打开 Chrome DevTools → 选中被遮挡的元素 → 右侧 Computed 标签页 → 搜索 filter 和 stacking context：
- 先看目标元素自身是否设置了
filter（极少情况） - 再逐级向上点父节点，直到找到第一个标有 “This element establishes a stacking context” 的祖先
- 点开它的 Computed 样式，确认
filter值不是none；同时顺手检查opacity、transform、will-change是否也在作祟 - 临时在 Styles 面板里勾掉该父元素的
filter，遮挡立刻消失，就坐实了问题
修复方案：拔掉 filter 还是绕过它
不能只改子元素的 z-index 数字，得从结构上解套：
- 如果
filter是为动画过渡（比如 hover 模糊），且非必须视觉效果，直接删掉最干净 - 如果必须保留（如全局毛玻璃背景），就把需要“突围”的元素（如
dropdown、tooltip）用position: fixed提出来，挂到下，并用 JS 动态计算top/left位置（注意滚动偏移） - 若多个子模块共用一个带
filter的容器，不如把整个容器设高z-index（前提是它自己是定位元素），让它整体抬高，比在内部堆数字更可控 - 避免用
filter: blur(0)当“占位符”或“兼容写法”，它和blur(1px)对层叠上下文的影响完全一致
为什么 transform + filter 组合更危险
两者叠加时，浏览器会强制新建合成层，层叠上下文的“隔离性”更强，调试时更容易误判。例如：transform: translateY(0); filter: brightness(1); 看似什么都没变，但已构成双重上下文触发条件。
特别注意：某些 CSS-in-JS 库或 UI 组件（如 Ant Design 的 Card、Element Plus 的 el-card）默认加了 filter 或 backdrop-filter，升级后突然出现层级问题，大概率是这里埋的雷。
真正难处理的不是 z-index 写多少，而是谁悄悄建了那个看不见的“盒子”。filter 就是其中最常被当作无害装饰、却一出手就锁死子元素层级的属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
