CSS Master

forthechild.Iftheparentrectanglewasnotpositioned,thischildelementwould

insteadbedrawnatthebottomrightofthebrowserwindow.

Figure 6.4. A child element with position: absolute inside a container with position: relative

Transformsworksimilarly.Settingthevalueoftransformtosomethingotherthan

noneturnsthetransformedelementintoacontainingblock.Positionedchildrenof

atransformedelementarepositionedrelativetothatelement,asseeninFigure6.5.

Figure 6.5. A child element with position: absolute nested within an element with transform: skewX(-15deg)

NotethatinFigure6.5,theparentelementisnotpositioned.Thetransformproperty

iswhat’screatingthiscontainingblock.

transform Creates a New Stacking Context

Transformsalsocreateanewstackingcontextfortheelementtowhichit’sapplied.

AsyoumayrecallfromChapter 4 ,elementswithinastackingcontextarepainted

frombacktofrontasfollows:

228 CSS Master