CSS Master

css/chapter4/menu.css (excerpt)

header {

background: #222629;

color: whitesmoke;

position: fixed;

top: 0;

width: 100%;

z-index: 1;

}

Nowournavelementiscontainedwithinthestackingcontextofitsparent.Since

headerhasastacklevelof 1 andnavisitschild,themenusitsabovetherestofour

content.Butbecausenavhasanegativestacklevel,itsitsatthebottomofthe

headerelement’sstackingcontext,asillustratedinFigure4.13.

Figure 4.13. Managing elements within a local stacking context

Fortherestofthischapter,we’llswitchgearsandtalkabouttwomodulesforcreating

complexlayouts:multiplecolumnandflexiblelayout.Bothmodulesmakeprevi-

ouslydifficultlayoutsstraightforward,andpreviouslyimpossiblelayoutspossible.

146 CSS Master