z-index不生效的首要原因是元素未定位；必须设置position为relative、absolute、fixed或sticky才能触发层叠上下文，static元素完全忽略z-index。
z-index 不生效？先确认元素是否已定位
很多情况下写上 z-index 却没反应，根本原因是该元素没有触发「层叠上下文（stacking context）」。CSS 规定：z-index 只对 position 值为 relative、absolute、fixed 或 sticky 的元素生效，static（默认值）完全忽略 z-index。
- 检查目标元素的
position是否被覆盖（比如父容器重置了子元素的position） - 避免在
position: static元素上徒劳设置z-index - 用浏览器开发者工具的「Computed」面板直接查看
position实际计算值
父子元素 z-index 比较失效？注意层叠上下文隔离
父元素设置了 z-index（且自身已定位），就会创建新的层叠上下文——此时子元素的 z-index 只在该父容器内部生效，无法越过父级去和外部同级元素比高低。
- 例如：
.parent { position: relative; z-index: 10; }+.child { position: absolute; z-index: 999; }，这个999仍低于外部z-index: 20的兄弟元素 - 若需子元素“穿透”父级层级，要么移除父级的
z-index，要么把子元素提到 DOM 更高位置（脱离该父层叠上下文） - 其他会隐式创建层叠上下文的属性：
opacity < 1、transform非none、filter、will-change等，也要小心连带影响
多个同级绝对定位元素怎么控制遮盖顺序？按 z-index 数值升序排列
同属一个层叠上下文的定位元素，显示顺序由 z-index 数值决定：数值大的在上，相等时按 HTML 出现顺序（后写的盖住先写的）。
.box-a {
position: absolute;
z-index: 1;
}
.box-b {
position: absolute;
z-index: 3;
}
.box-c {
position: absolute;
z-index: 2;
}
上面三个元素将按 .box-a（最下）、.box-c（中间）、.box-b（最上）叠放。注意：z-index 支持负数，-1 会低于未设 z-index 的定位元素（其默认为 auto，等价于 0）。
立即学习“前端免费学习笔记（深入）”；
移动端或复杂嵌套中 z-index 失控？优先用最小必要值+命名空间化
大型项目容易出现 z-index: 999999 式滥用，导致后续维护困难、意外覆盖。更稳妥的做法是划分层级区间并预留余量。
- 基础层（背景、蒙层）：用
z-index: 0–9 - 内容主体层：用
z-index: 10–99 - 弹窗/提示层：用
z-index: 100–199 - 全局加载/锁屏：用
z-index: 1000+ - 避免直接写死数字，改用 CSS 自定义属性统一管理：
--z-modal: 150;，再通过z-index: var(--z-modal);引用
真正麻烦的不是数值本身，而是某处悄悄新建了一个层叠上下文，又没意识到它截断了整个层级链——这种问题往往要靠逐层检查 computed styles 才能定位。
