mix-blend-mode非normal会强制创建层叠上下文，使子元素z-index仅在内部生效，无法与外部元素跨上下文比较层级，导致看似“失效”。
mix-blend-mode 本身不改变 z-index 值，但它会强制创建新的层叠上下文——这才是影响层级的根本原因。
mix-blend-mode 为什么会让 z-index “失效”
只要元素设置了 mix-blend-mode（非 normal），它就自动成为层叠上下文根元素。这意味着：
- 它的子元素的
z-index只在它内部生效，无法突破到父级上下文中去“争高下” - 即使子元素
z-index: 9999，若父容器本身z-index: 1且已处于低层叠上下文里，整个子树仍会被盖住 - 常见翻车场景：导航菜单弹出层用了
mix-blend-mode: overlay，结果被隔壁没设混合但z-index: 10的轮播图挡住
定位元素加了 mix-blend-mode 后 z-index 不起作用的典型表现
你看到的不是 z-index 失效，而是它被“关进小黑屋”了：
- 浏览器开发者工具里，该元素的“堆叠上下文”状态显示为
created（而非inherited） - 它的
z-index值在 computed 面板中依然存在，但和兄弟元素比较时，实际比的是两个不同上下文的“整体层级” - 如果父容器也意外创建了层叠上下文（比如加了
opacity: 0.99或transform: translateZ(0)），那子元素的混合上下文就被嵌套两层，更难干预
如何安全地让 mix-blend-mode 和 z-index 协同工作
关键不是压制 mix-blend-mode，而是控制层叠上下文的边界：
- 把
mix-blend-mode尽量放在最外层视觉容器上（比如封面图容器），避免套在按钮、弹窗等交互密集的子元素上 - 需要精确控制层级时，用
isolation: isolate主动隔离混合区域，防止混合行为向上/向下污染其他元素的上下文 - 若必须对某层文字做混合，又希望它浮在顶部，不要给文字本身设
mix-blend-mode，而是用伪元素::before覆盖一层带混合模式的色块，主内容保持干净 - 移动端尤其注意：Safari 对混合+层叠上下文的处理更保守，
mix-blend-mode和filter绝对不能共存于同一元素
真正棘手的从来不是 z-index 写多少，而是你根本没意识到那个 mix-blend-mode: screen 已经悄悄给自己建了一堵墙——墙外的世界，它的 z-index 一个字都传不出去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
