CSS堆叠上下文问题：嵌套元素覆盖父元素的同级元素

我正在学习堆叠上下文（stacking context），于是动手测试所学内容。我理解z-index仅对堆叠上下文内的元素生效，且元素无法脱离自身堆叠上下文。因此我创建了3个各自拥有堆叠上下文的盒子，并将box4嵌套在box1中，试图通过修改box4的z-index证明它不会覆盖box2和box3——因为z-index仅在box1内部生效，哪怕box4的z-index设为999999，也不应覆盖处于其堆叠上下文外的box2和box3。但实际情况是：box4仅设置z-index为1就覆盖了box2和box3。对此我感到困惑，想请教是我对堆叠上下文的理解有误，还是所学知识已过时？

测试代码 #

CSS代码 #

h1 {
  text-decoration: underline;
}

.absolute {
  position: absolute; /*创建堆叠上下文*/ 
  vertical-align: bottom;
  text-align: end;
}

.box4 {
  z-index: 1; /*该属性应仅在box1内部影响box4的堆叠顺序*/
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Document</title>
  </head>
  <body>
    <header>
      <div
        style="width: 500px; height: 500px; background-color: red"
        class="absolute box1"
      >
        <div
          style="
            width: 200px;
            height: 200px;
            background-color: rgb(215, 15, 255);
          "
          class="absolute box4"
        >box4</div>
        box1
      </div>
    </header>
    <main>
      <div
        style="width: 400px; height: 400px; background-color: goldenrod"
        class="absolute box2"
      >
        box2
      </div>
    </main>
    <footer>
      <div
        style="width: 300px; height: 300px; background-color: rgb(30, 255, 0)"
        class="absolute box3"
      >
        box3
      </div>
    </footer>
  </body>
</html>

问题解析 #

你的核心理解方向没错，但存在一个关键认知漏洞：box1并没有创建独立的堆叠上下文。

• 堆叠上下文的创建条件里，position:absolute本身不足以触发，必须同时满足「z-index值不为auto」（或者其他条件如transform、opacity<1等）。你的box1仅设置了position:absolute，z-index默认是auto，所以它不属于独立的堆叠上下文容器，仍然隶属于根堆叠上下文。
• 这种情况下，box4的z-index:1是直接相对于根堆叠上下文生效的。而box2、box3同样是position:absolute但z-index为auto，数值型z-index的优先级高于auto，所以box4自然会覆盖它们。
• 验证修正：给box1添加z-index:0（或任何非auto的数值），此时box1才会创建独立堆叠上下文。这时候box4的z-index仅在box1内部生效，哪怕设为999999，也无法覆盖box2和box3——因为box1、box2、box3同属根上下文的堆叠层级，box4被完全局限在box1的上下文内部。

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