Question

Let’s say you have several images in a DIV which are absolutely positioned such that they overlap but with no z-index defined:

CSS

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

HTML

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

I’ve noticed that Safari and Chrome will display the last element on top. Is this standard behavior? In other words, is it relatively safe to assume that most browsers will display the last element on top?

Answer 1

Yes, it’s safe to assume. According to the 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.