html - 没有z-index的堆叠？

Question

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

这个规范对 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' 重叠的可能性有多大？

score 7 · Accepted Answer

在您的示例中，根据您引用的文档，两个div元素都已定位但没有 z-index，因此具有相同的优先级（注意：它们的堆叠顺序确实高于未定位的元素）。这意味着它们按照它们在标记中出现的顺序堆叠，最后声明的元素具有最高的堆叠索引。

因此，按照那个定义，上面出现的机会是不可能的。div1div2

有关更多信息，请参阅有关堆叠上下文的 W3C CSS2 规范。特别注意第8点：

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

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

score 1 · Accepted Answer

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

这就是我所知道的。

2 回答 2