Css 为什么可以'；具有z索引值的元素是否覆盖其子元素？

今天经过几个小时的调试，我艰难地学会了这条规则：

如果父元素具有任意值的z索引，则无论您如何更改子元素的CSS，父元素永远无法覆盖（堆叠在其子元素之上）

我如何用逻辑来理解这种行为？说明书上有吗

.container{
宽度：600px；
高度：600px；
背景颜色：鲑鱼；
位置：相对位置；
z指数：99；
填充顶部：10px；
}
h1{
背景颜色：粉红色；
位置：相对位置；
z指数：-1；
字体系列：monospace；
}

1.如果我的z指数为正，我永远不会被父母所覆盖。
2.即使我的z-指数是令人讨厌的，如果我的父母有z-指数，我也永远不会被覆盖。

确实说

z-index CSS属性设置定位元素及其子元素或flex项的z顺序

---

这里有一些关于子代与子代的附加逻辑。

考虑这一点的好方法是，每个父代都包含自己的堆栈上下文。同级元素共享父元素的堆叠顺序，因此可能相互重叠

子元素总是基于其父元素获取堆叠上下文。因此，需要一个负z索引值来将子对象推到其父（0）堆栈上下文的“后面”

从父元素的上下文中删除元素的唯一方法是使用

position:fixed

，因为这实际上迫使它使用上下文窗口

我如何用逻辑来理解这种行为

对我来说，很难用逻辑来理解你的问题。父对象包含其子对象。一个碗可以被另一个碗盖住。但是你不能用碗盖住汤，除非你把汤从碗里放出来

设置重叠元素的顺序。父对象不能与子对象重叠

---

我认为这是完全合乎逻辑的

您需要知道两件重要的事情：绘制顺序和堆叠上下文。如果参考，可以找到绘制图元的方式和时间

堆叠上下文由具有负z索引的定位子体（不包括0）按z索引顺序（最负的顺序）然后按树顺序形成

---

所有定位子体、不透明度子体或变换子体，按树顺序分为以下类别：

按树顺序定位具有“z-index:auto”或“z-index:0”的所有子体

---

堆叠上下文由定位后的子体构成，子体的z索引大于或等于1，按z索引顺序排列（先最小），然后按树顺序排列

从这一点可以清楚地看出，我们首先在步骤（3）中使用负

z-index

绘制元素，然后在步骤（8）中使用

z-index

等于0的元素，最后在步骤（9）中使用正

z-index

绘制元素，这是合乎逻辑的。我们还可以阅读以下内容的另一部分：

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

也

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

---

要了解何时绘制每个元素，您需要知道其堆叠上下文和其堆叠级别（由

z-index

定义）。您还需要知道该元素是否建立了堆叠上下文。这是一个棘手的部分，因为设置

z-index

将执行以下操作：

对于定位框，“z索引”属性指定：

当前堆叠上下文中长方体的堆叠级别

框是否建立堆叠上下文

值具有以下含义：

此整数是当前堆叠上下文中生成的长方体的堆叠级别。该框还建立了一个新的堆叠上下文

auto

当前堆叠上下文中生成的长方体的堆叠级别为0。框不会建立新的堆叠上下文，除非它是根元素

---

现在我们有了所有的信息来更好地了解每一个案例。如果父元素的

z-index

值不是

auto

，则它将创建一个堆叠上下文，因此子元素将被绘制在其

z-index

的内部（负或正）。子元素的

z-index

将简单地告诉我们父元素内部的绘制顺序（这涵盖了第二点）

现在，如果只有子元素具有正的

z-index

，并且我们在父元素上没有设置任何内容，那么考虑到绘制顺序，稍后将绘制子元素（在步骤（9）中），并在步骤（8）中绘制父元素。绘制上面的父元素的唯一合乎逻辑的方法是增加

z-index

，但这样做会使我们陷入前一种情况，即父元素将建立堆栈上下文，子元素将属于它

当为子元素设置正

z-index

时，无法将父元素置于子元素之上。此外，如果我们设置一个

z-in，则没有办法让父对象高于子对象