filter非none会触发父元素创建新的层叠上下文，使子元素z-index仅在该上下文中生效，无法与外部元素比较层级。
filter 会让父元素创建新的层叠上下文
给父元素加 filter（比如 filter: blur(1px)、filter: opacity(0.9)）会隐式触发一个新的层叠上下文（stacking context），这和 opacity: 0.99 或 transform: translateZ(0) 效果一致。一旦发生，所有子元素的 z-index 就只在该父容器内部生效，无法再和外部兄弟元素比高低。
常见现象是：一个弹窗（position: absolute + z-index: 1000）被盖在了导航栏下面，而导航栏恰好套在带 filter 的 wrapper 里——不是弹窗 z-index 太小，而是它和导航栏根本不在同一个层级“擂台”上。
怎么快速确认是不是 filter 搞的鬼
打开 Chrome DevTools，选中疑似“作祟”的父元素，在 «Computed» 面板里搜 filter，看是否生效；再往下滑，找 «Stacking Context» 提示 —— 如果显示 “Yes”，说明它已经成了层叠上下文的“结界”。
- 临时删掉父元素的
filter，观察层级是否立刻恢复正常 - 或者把
filter挪到子元素上（如果语义允许），避免污染整个父级上下文 - 用
outline: 1px solid red给父元素描边，确认视觉边界和你预期的定位参照范围是否一致
不删 filter 怎么修复层级关系
如果必须保留父级 filter（比如要做背景虚化），又想让某个子元素“破壁而出”，有几种务实做法：
- 把需要高层级的子元素提到父元素外层 DOM，和 filter 容器平级，再用
position: absolute+z-index控制位置（需 JS 或模板调整结构） - 给父容器加
isolation: isolate—— 它本身不创建新层叠上下文，但能防止子元素意外继承或强化上下文（兼容性较好，Chrome/Firefox/Edge 均支持） - 避免在父容器上同时设
filter和z-index，后者会进一步固化层叠隔离；若真要控制内部顺序，统一用z-index在子元素之间协调即可
为什么 transform 替代不了 filter 的视觉效果
transform 虽然也会创建层叠上下文，但它不能实现模糊、亮度调节、色彩偏移等 filter 特有的效果。硬用 transform: blur() 是无效的 —— CSS 中没有这个函数，blur() 只存在于 filter 语法里。
所以别试图用 transform 规避问题，重点是接受「filter = 新层叠上下文」这个事实，并在结构或层级设计上提前留出余地。真实项目里，错乱往往不是出在子元素，而是你忘了那个不起眼的 filter: drop-shadow() 正蹲在祖父节点上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
