CSS Master

1.Child-stackingcontextswithanegativestacklevel(forexample,positionedz-

index: -1)

2.Nonpositionedelements

3.Child-stackingcontextswithastacklevelof 0 (forexample,positionedandz-

index: 0;orz-index: auto;)

4.Child-stackingcontextswithpositivestacklevels(forexample,z-index: 1)sit

atthetopofthestack

Settingthevalueoftransformtosomethingotherthannoneputstheelement’s
stacklevelat 0 ,andwillcauseatransformedelementtobestackedinfrontof
nonpositionedelements.Thez-indexvaluesofeachchildelementwillberelative
totheparent.Let’supdateourexamplefromChapter 4 toseehowthisworks:

<div style="position:relative;">

<div id="a">

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

</div>

<div id="b" style="transform: scale(2) translate(25%, 15%);">

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

</div>

<div id="c" style="position:relative; z-index: 1">

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

</div>

<div id="d" style="position:absolute; z-index: -1">

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

</div>

</div>

Inthiscase(seeFigure6.6),div#dsitsatthebottomofthestack,anddiv#asits
aboveit.Butdiv#bcomesnextbecausethetransformpropertyforcesitsz-index
valuetobe 0 insteadofauto.Withz-index: 1,div#csitsatthetopofthestack.

CSS Transforms 229