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