嵌套定位元素中z-index属性不生效的原因排查求助

你这里的核心误解在于对**堆叠上下文（stacking context）**的理解——这是z-index生效的关键前提，很多前端开发者都会在这里踩坑。

先直接给你结论：.outer-div的紫色区域不会覆盖.inner-div的红色区域，反而红色会始终在紫色之上，原因拆解如下：

1. 堆叠上下文的独立性
   当你给.outer-div设置了position: relative/absolute/fixed/sticky + z-index: 3时，它就创建了一个独立的堆叠上下文。这个上下文内部的所有元素（包括.inner-div）的层级比较，都只会在这个上下文内部进行，和外部元素无关；反过来，父元素的z-index值，是用来和同一层级的其他堆叠上下文元素（比如和.outer-div同级的其他定位元素）比较优先级的，不会影响自己内部子元素的层级。

2. 子元素的层级默认在父内容之上
   .inner-div作为.outer-div的子元素，哪怕你给它设置z-index: 1（比父的3小），它依然属于父元素的堆叠上下文，并且会自然地显示在父元素的背景/内容区域之上——因为子元素是父元素内容的一部分，堆叠上下文内部的基础层级逻辑是：父元素的背景 < 父元素的文本/子元素（不管子元素z-index是多少，只要是非静态定位）。

举个直观的代码例子验证：

<style>
.outer-div {
  position: relative;
  z-index: 3;
  width: 200px;
  height: 200px;
  background: purple;
  padding: 20px;
}
.inner-div {
  position: relative;
  z-index: 1;
  width: 100px;
  height: 100px;
  background: red;
}
/* 加个同级元素看父元素z-index的实际作用 */
.sibling-div {
  position: relative;
  z-index: 2;
  width: 150px;
  height: 150px;
  background: blue;
  margin-top: -100px;
}
</style>
<div class="outer-div">
  <div class="inner-div"></div>
</div>
<div class="sibling-div"></div>

运行这段代码你会看到：

• .outer-div的紫色区域覆盖了.sibling-div的蓝色区域（因为父的z-index3 > 同级元素的2）
• 但.inner-div的红色区域依然在.outer-div的紫色区域之上（因为子元素在父的堆叠上下文内部，层级高于父的背景）

3. 如何让父元素覆盖子元素？
   如果你的需求是让.outer-div的紫色覆盖.inner-div的红色，那需要打破父子堆叠上下文的绑定关系，比如：

• 不给父元素设置z-index（让它不创建独立堆叠上下文，此时父与子处于同一上下文），然后给子元素设置z-index: -1，这样父元素的层级会高于子元素
• 或者给子元素设置position: fixed（fixed元素会脱离父元素的堆叠上下文，直接基于视口创建新上下文），再调整父元素的z-index超过子元素

最后再提炼关键知识点：

• z-index只在同一堆叠上下文内有效
• 定位元素+z-index非auto，会创建独立的堆叠上下文
• 堆叠上下文内部的元素无法突破上下文和外部元素比层级，反之亦然
• 父子元素在同一堆叠上下文时，z-index值才会直接比较；如果父创建了独立上下文，子元素的层级只在内部生效

内容的提问来源于stack exchange，提问作者WonkasWilly