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

Question

假设你有几个图像,DIV它们绝对定位,使它们重叠,但没有定义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会在最上面显示最后一个元素.这是标准行为吗？换句话说,假设大多数浏览器会在最上面显示最后一个元素是否相对安全？

Answer 1

是的,可以安全地假设.根据W3C:

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