Html CSS定位：不带z索引的相对影响堆叠顺序

我遇到了一些奇怪的CSS，我找不到一个解释

使用

position:absolute

，一个

div

a被拉到另一个

div

b上方。当

div

b（坐在a下面）有一个具有

位置：relative

的子元素时，该元素出现在a上面

var parent=document.querySelector（“.parent”）
document.querySelector（'button'）。addEventListener（'click'，function（）{
parent.classList.toggle（'toggle-class'）
});
.parent{
背景：灰色；
高度：100px；
位置：相对位置；
}
.儿童a{
背景：橙色；
位置：绝对位置；
宽度：100%；
身高：100%；
文本对齐：居中；
}
.child-b{
背景：绿色；
身高：100%；
}
.切换类.child-b span{
位置：相对位置；
}

孩子a
孩子
切换
这是因为堆叠上下文。请注意，构成堆叠上下文的不仅仅是
z-index
值。定位元素也可以。因此
.parent
创建了一个堆叠上下文，因为它位于
相对的位置。切换时，
.child-b
span将相对于
.parent
定位

请参见
这是因为堆叠上下文。请注意，构成堆叠上下文的不仅仅是
z-index
值。定位元素也可以。因此
.parent
创建了一个堆叠上下文，因为它位于
相对的位置。切换时，
.child-b
span将相对于
.parent
定位

请参见
在不使用z-index的情况下堆叠时，元素按以下顺序堆叠（从下到上）：

根元素的背景和边框
子代未定位块，按HTML中的外观顺序排列
子体按HTML中的外观顺序定位元素
来源

因此，在您的情况下，当切换时，子代（子代）变成定位元素，因此它的父代（因为祖辈（
.parent
）是定位元素）

按照规则#3，HTML中出现的后一个元素将显示，因此，在没有z-index的情况下堆叠时，此行为将按以下顺序（从下到上）堆叠元素：

根元素的背景和边框
子代未定位块，按HTML中的外观顺序排列
子体按HTML中的外观顺序定位元素
来源

因此，在您的情况下，当切换时，子代（子代）变成定位元素，因此它的父代（因为祖辈（
.parent
）是定位元素）

按照规则#3，HTML中出现的后一个元素将显示，因此此行为
感谢您的回答！我有点困惑，因为文档中说‘元素的位置值为“绝对”或“相对”，z-索引值不是“自动”。（我的重点）。由于我只将
位置
定义为
相对
，
z-index
应处于其初始值，即
自动
。为什么会出现新的堆叠上下文？谢谢您的回答！我有点困惑，因为文档中说‘元素的位置值为“绝对”或“相对”，z-索引值不是“自动”。（我的重点）。由于我只将
位置
定义为
相对
，
z-index
应处于其初始值，即
自动
。为什么新的堆叠仍然会形成上下文？