transform非none（如translatez(0)、scale(1)）必触发新层叠上下文，使内部z-index仅在该上下文中生效，无法与外部元素跨层比较层级；需检查祖先元素是否创建了隔离上下文，并通过提升父容器z-index或统一dom层级来解决。
transform 会让 absolute 元素的 z-index 失效，不是因为写错了值，而是它悄悄创建了一个新层叠上下文（stacking context），把子元素的层级比较范围锁死在自己内部。
transform 为什么会让 z-index “突然不跨层生效”
只要父元素的 transform 计算值不是 none（哪怕只是 transform: translateZ(0) 或 transform: scale(1)），它就自动触发一个新的层叠上下文。这个上下文像一道墙：里面所有子元素的 z-index 只能互相比较，无法和外部同级元素比高低。
常见现象：
- 两个兄弟弹窗，一个加了
transform: scale(0.95)做入场动画，另一个没加；前者明明写了z-index: 1000，却被后者（z-index: 999）盖住 - 模态框里嵌了个带
transform的卡片，卡片里的按钮怎么调z-index都浮不出模态框外框
根本原因不是数值小，是它们根本不在同一个“比较池”里——就像两个不同微信群里的人，再高的群内发言权也影响不了另一个群的秩序。
哪些 CSS 属性会触发同样的层叠上下文
除了 transform，以下属性只要计算值非默认，也会创建独立层叠上下文，导致子元素 z-index 被隔离：
-
opacity小于1（比如opacity: 0.99） -
filter不为none（比如filter: blur(1px)） will-change: transform-
perspective不为none isolation: isolate
这些常被用作性能优化或动效准备，但调试时容易忽略它们对层叠关系的副作用。Chrome DevTools 的 Layers 面板能直接看到哪些区域被单独分层。
如何判断 z-index 是真失效还是被上下文隔离
先确认目标元素是否满足 z-index 生效前提：
- 该元素本身设置了
position: relative/absolute/fixed/sticky - 它的任意祖先（不一定是父级，可能隔了三四层）有
transform、opacity、filter等触发层叠上下文的属性 - 它和想覆盖的目标元素不在同一个层叠上下文里（可检查两者最近的共同祖先是否已创建上下文）
如果发现是后者，别硬调子元素的 z-index，而应提升其父容器在外部上下文中的层级——比如给那个带 transform 的父容器本身加一个更高的 z-index，让它整体“抬高”，子元素自然跟着上去了。
真正要改 z-index 时，结构比数值更重要
很多团队靠堆大数字（z-index: 999999）掩盖问题，但根源在于缺乏分层规划。建议按功能划分层级区间：
- 背景层：
z-index: 0–1 - 主内容区：
z-index: 2–5 - 悬浮工具栏：
z-index: 10–20 - 模态框/弹窗：
z-index: 100–199 - 全局提示（toast/alert）：
z-index: 1000+
关键点：所有需要参与同一层级竞争的元素，必须确保它们的最近共同祖先**不意外创建层叠上下文**。否则再大的数字也只是在自己的小房间里喊得响。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
