Stacking without z-index?

Question

I searched a lot for how stacking of HTML elements occurs without z-index, however could not find anything concrete. I did find that stacking without z-index occurs in the order of the appearance of the HTML.

https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/Stacking_without_z-index

Is this specification valid for IE? I have two divs enclosed in another div. Both the divs have absolute position:

<div>
    <div id"div1" style="position:absolute"></div>
    <div id"div2" style="position:absolute"></div> 
</div>

for both the divs, i.e. div1 and div2, the values of left and width are same. From my understanding about the behavior of CSS here, div2 should always overlap div1. What is the possibility that 'div1' will overlap 'div2'?

Answer 1

In your example, according to the document you've referenced, both div elements are positioned but without z-index, therefore having equal precedence (note: they do have a higher stacking order than unpositioned elements). This means they are stacked in the order they appear in the markup, with the last declared element having the highest stacking index.

Therefore, according to that definition, there is no chance that div1 will appear above div2.

See the W3C CSS2 specification on stacking context for more information. Note point 8 in particular:

All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order.

Basically the order defined in the source is the order of stacking (not specifying z-index equates to z-index: auto).