html - 没有 z-index 的堆叠？

Question

我搜索了很多关于在没有 z-index 的情况下如何堆叠 HTML 元素的信息，但是找不到任何具体的内容。我确实发现没有 z-index 的堆叠是按照 HTML 的出现顺序发生的。

https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/Stacking_without_z-index

此规范对 IE 有效吗？我有两个 div 包含在另一个 div 中。两个 div 都有绝对位置:

<div>
    <div id"div1" style="position:absolute"></div>
    <div id"div2" style="position:absolute"></div> 
</div>

对于两个 div，即 div1 和 div2，left 和 width 的值是相同的。根据我对此处 CSS 行为的理解，div2 应始终与 div1 重叠。 “div1”与“div2”重叠的可能性有多大？

Answer 1

在您的示例中，根据 document you've referenced ，两个 div 元素都是 positioned 但没有 z-index，因此具有相同的优先级(注意:它们确实比未定位的元素具有更高的堆叠顺序)。这意味着它们按照它们在标记中出现的顺序堆叠，最后声明的元素具有最高的堆叠索引。

因此，根据该定义，div1 不可能出现在 div2 之上。

参见 W3C CSS2 specification on stacking context了解更多信息。请特别注意第 8 点:

All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order.

基本上源码中定义的顺序就是堆叠的顺序(不指定z-index等同于z-index: auto)。