为什么具有z-index值的元素不能覆盖其子级？

Question

今天，经过四个小时的调试，我很难学到了这个规则：

如果父级的z-index值为任何值，则无论您如何更改子级的CSS，父级元素都永远无法覆盖（堆叠在其子级元素之上）

我如何通过逻辑理解这种行为？规范在哪里覆盖？

代码（也在CodePen中）：

.container {
  width: 600px;
  height: 600px;
  background-color: salmon;
  position: relative;
  z-index: 99;
  margin-top: 20px;
  padding-top: 10px;
}

h1 {
  background-color: pink;
  position: relative;
  z-index: -1;
  font-family: monospace;
}

<div class="container">
  <h1>1. I can never be covered by parent if my z-index is positive.</h1>
  <h1>2. Even when my z-index is nagative, I still can never be covered if my parent has any z-index at all.</h1>
</div>

Answer 1

您需要了解两件重要的事情：绘画顺序和堆叠上下文。如果您参考规范，则可以找到绘制元素的方式和时间。

3. 堆叠由定位的后代所形成的上下文，这些后代具有负z索引（不包括0），按z索引顺序（最负数先），然后按树顺序排列。

8. 按树顺序排列的所有已定位，不透明或转换后代均属于以下类别：
   1. 所有以“ z-index：auto”或“ z-index：0”排列的后代，按树顺序排列。

9. 堆叠上下文，这些上下文由定位的后代（z索引大于或等于1）按z索引顺序（最小的顺序为小）和树顺序形成。

显然，我们首先z-index在步骤（3）绘制带有负数的元素，然后z-index在步骤（8）绘制等于0的元素，最后z-index在步骤（9）绘制具有正数的元素，这是合乎逻辑的。我们还可以阅读：

每个盒子都属于一个堆叠上下文。给定堆叠上下文中的每个盒子都有一个整数堆叠级别，这是它在z轴上相对于同一堆叠上下文中其他盒子的位置。具有较高堆栈级别的框始终在具有较低堆栈级别的框前面格式化。盒子的堆叠高度可能为负。在堆叠上下文中具有相同堆叠级别的框将根据文档树顺序从下至上堆叠。

也

建立本地堆栈上下文的元素会生成一个具有两个堆栈级别的框：一个用于它创建的堆栈上下文（始终为0），一个用于它所属的堆栈上下文（由z-index属性赋予）。

要了解何时绘制每个元素，您需要了解其堆叠上下文以及该堆叠上下文（由中定义）内的堆叠级别z-index。您还需要知道该元素是否建立了堆栈上下文。这是棘手的部分，因为设置z-index可以做到这一点：

对于定位框，z-index属性指定：

1. 当前堆栈上下文中框的堆栈级别。
2. 盒子是否建立堆叠环境

值具有以下含义：

<integer>

该整数是当前堆栈上下文中生成的框的堆栈级别。该框还建立了新的堆叠上下文。

auto

当前堆栈上下文中生成的框的堆栈级别为0。除非框是根元素，否则框不会建立新的堆栈上下文。

现在，我们拥有所有信息，可以更好地理解每种情况。如果父元素的z-index值不是auto，则它将创建一个堆栈上下文，因此子元素将被绘制在内部z-index（负值或正值）。该z-index子元素将简单地告诉我们的父元素内画的顺序（这包括你的第二个点）。

现在，如果仅子元素具有正数，z-index而我们在父元素上未设置任何内容，则考虑绘画顺序，稍后将绘画孩子（在步骤（9）中），并在步骤（8）绘画父元素。在上面绘制父级的唯一合乎逻辑的方法是增加z-index，但是这样做会使我们陷入先前的情况，父级将建立一个堆栈上下文，而子元素将属于该上下文。

有没有办法设置时，有一个子元素之上的父母正 z-index给孩子。如果我们将父元素设置为不同于（正数或负数）的父元素，则也无法使父项高于子项。z-indexauto

我们唯一可以在其父项之下有一个子项的情况是z-index在子元素上设置一个负数，并将父项保持在z-index: auto，因此这将不会创建堆叠上下文，并且按照绘画顺序将首先对子项进行绘画。

除此以外z-index，还有其他一些属性可以创建堆栈上下文。如果遇到预期的堆叠顺序，则还需要考虑这些属性，以查看是否创建了堆叠上下文。

我们可以从以上总结得出一些重要事实：

• 堆栈上下文可以包含在其他堆栈上下文中，并一起创建堆栈上下文的层次结构。
• 每个堆栈上下文完全独立于其同级：处理堆栈时仅考虑后代元素。
• 每个堆叠上下文都是独立的：将元素的内容堆叠之后，将按照父堆叠上下文的堆叠顺序考虑整个元素。^参考