css 多个定位元素重叠怎么办_使用 z index 区分显示层级

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 、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 才能定位。