html - 具有相同 z-index 的绝对定位元素：哪个元素将在顶部？

Question

假设您在 aDIV中有几张图像，它们的位置是绝对重叠的，但没有定义 z-index：

CSS

img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
}

HTML

<div>
    <img src="...">
    <img src="...">
    <img src="...">
</div>

我注意到 Safari 和 Chrome 会在顶部显示最后一个元素。这是标准行为吗？换句话说，假设大多数浏览器会在顶部显示最后一个元素是否相对安全？

score 16 · Accepted Answer

是的，可以肯定地假设。根据W3C：

每个盒子属于一个堆叠上下文。给定堆叠上下文中的每个定位框都有一个整数堆叠级别，这是它在 z 轴上相对于同一堆叠上下文中其他堆叠级别的位置。具有较高堆栈级别的框总是在具有较低堆栈级别的框之前格式化。盒子可能有负的堆栈级别。在堆叠上下文中具有相同堆叠级别的框根据文档树顺序从后到前堆叠。

score 2 · Accepted Answer

通常，最后激活的将在顶部。

div a is z-index 10, and appears first in the document

div b is z-index 10, and appears second in the document

当文档呈现时，b 将在 a 之上，因为 a 被写入，然后 b 被写入顶部。

修改 a 可以把它放在首位。

基本上，如果您需要 a 出现在 b 之上，您应该在“a”上设置一个点击处理程序来提升它。

score -1 · Accepted Answer

将显示浏览器读取的同一位置的最后一张图像。是的，这是一个安全的赌注，在所有浏览器中都是如此，因为所有文件都是逐行读取的。

3 回答 3