CSS Master

applied.Whetherpartofarootorlocalcontext,childrenwithinastackingcontext
arepaintedtothescreenfromback-to-frontasfollows:

1.Childstackingcontextswithanegativestacklevel(forexample,positionedand

z-index: -1)

2.Non-positionedelements

3.Childstackingcontextswithastacklevelof 0 (forexample,positionedandz-

index: auto)

4.Childstackingcontextswithpositivestacklevels(forexample,positionedand

z-index: 1)^5

Iftwoelementshavethesamestacklevel,they’llbelayeredaccordingtotheirorder
inthesourceHTML.^6

Let’slookatanexample.Here’sourHTML:

<div id="a">

<p><b>div#a</b></p>

</div>

<div id="b">

<p><b>div#b</b></p>

</div>

<div id="c">

<p><b>div#c</b></p>

</div>

<div id="d">

<p><b>div#d</b></p>

</div>

<div id="e">

<p><b>div#e</b></p>

</div>

Andhere’sourCSS:

(^5) Anelementispositionedifitspositionvalueissomethingotherthanstatic.
(^6) ThisisdiscussedinfargreaterdetailinAppendixEoftheCSS2specification.
[http://dev.w3.org/csswg/css2/zindex.html]
Complex Layouts 137