html - 具有相同 z-index : which element will be on top? 的绝对定位元素

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 会在顶部显示 last 元素。这是标准行为吗？换句话说，假设大多数浏览器会将最后一个元素显示在顶部是否相对安全？

Answer 1

是的，可以安全地假设。根据 W3C :

Each box belongs to one stacking context. Each positioned box in a given stacking context has an integer stack level, which is its position on the z-axis relative other stack levels within the same stacking context. Boxes with greater stack levels are always formatted in front of boxes with lower stack levels. Boxes may have negative stack levels. Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.