没有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元素都定位但没有z-index，因此具有相同的优先级（注意：它们确实具有更高的优先级）堆叠顺序比未定位元素）。这意味着它们按照它们在标记中出现的顺序堆叠，最后声明的元素具有最高的堆叠索引。

因此，根据该定义，div1上方div2 没有机会。

有关详细信息，请参阅W3C CSS2 specification on stacking context。请注意第8点：

  

所有定位后代的'z-index：auto'或'z-index：0'，按树顺序排列。

基本上，源中定义的顺序是堆叠顺序（未指定z-index等于z-index: auto）。

Answer 2

如果将两个DIV的左侧和顶部属性设置为相同，则第二个DIV将始终与第一个DIV重叠。

这就是我所知道的。