Absolutely positioned elements with the same z-index: which element will be on top?

Question

Let's say you have several images in a DIV that are absolutely positioned so that they overlap, but without a z-index:

CSS

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

HTML

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

I noticed that Safari and Chrome will show the last item 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 W3C :

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

Answer 2

in general, the last activated will be on top.

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

when the document displays b, it will be higher than a because a is written, then b is written on top.

Modification a can bring it on top.

basically you should have a click handler on 'a' to pick it up if you ever need it to appear on top of b.

Answer 3

The last image will be displayed at the same position that the browser is reading. Yes, this is a safe bet that occurs in all browsers because all files are read line by line.