Html 关于z指数的困惑

以下链接中的文章指出，z索引堆叠仅适用于同级元素：

但是下面的代码片段显示，对于z索引，具有不同父级的div是堆叠的。覆盖层位于文本上方和文本框下方，即使文本和文本框都属于同一父对象，但不属于覆盖层。根据这篇文章，这怎么可能

.overlay{
背景色：rgba（0,0,0,0.5）；
显示：块；
身高：100%；
左：0；
位置：固定；
排名：0；
宽度：100%；
z指数：2；
}

将保留在覆盖层下的某些文本。

问题在于，z-索引比较从第一个

相对

或

绝对

定位的DOM元素开始。所以cssz-index基本上忽略了所有具有

静态位置的元素

 <div class="overlay" style="display: block;"></div>

<div style="position:relative;z-index:3;">
    <div>
    Some text that will remain under the overlay.
    </div>
    <div style="width:1000px;">
        <div style="width:50%;">
            <div>
                <input style="width:80%;">
            </div>

        </div>
    </div>

</div>


将保留在覆盖层下的某些文本。

我认为这应该适合您
文档内容如下：

每个堆叠上下文与其同级完全独立：
处理堆叠时，仅考虑子体元素

这并不意味着堆叠上下文元素本身独立于其兄弟元素，但这意味着子元素是独立的

请注意，堆叠上下文位于“定位元素”中。定位元素是具有“相对”、“绝对”或“固定”位置和z索引的元素。只有定位的元素才能堆叠。在这种情况下，只有两个定位元素。他们自己在堆叠上下文，就像他们最近的祖先一样。但是，这些项目似乎没有（共享）定位的祖先。基于此，我们可以说：

这些项目都属于相同的定位祖先（堆叠上下文）：视口。因此，z-索引为您提供了预期的结果（更高的z-索引意味着在顶部）。在读取顺序中显示相等的z索引（顶部的最后一个）

创造另一个定位的祖先打破了这种行为，如列奥尼德所示。这是因为它创建了一个新的独立的堆叠上下文

向第二个div添加不透明度也会破坏这种行为，因为需要重画的元素（奇怪的是）被处理为定位元素（新的堆叠上下文）：


...

请看这一行动：


还是不明白吗？

阅读菲利普·沃尔顿的文章：。他解释得很好

另外，谁不喜欢堆栈溢出的好堆栈问题？
好问题。我认为这与您使用“位置固定”和“位置相对”有关。它在何处说明只能在兄弟姐妹之间使用？@webeno“重要的是，其子堆叠上下文的z索引值仅在此父级中有意义。堆叠上下文在父级堆叠上下文中被原子地视为单个单元。”@webeno“每个堆叠上下文完全独立于其兄弟元素：在处理堆叠时只考虑子元素。”这些都不意味着“z索引堆叠仅适用于兄弟元素”，您误解了文档。。。
<div class="overlay" style="display: block;"></div>
<div style="opacity: 0.99;">...</div>