CSS Master

Figure 4.12. Adding z-index: -1 forces nav to the bottom of the stack

ThenavigationslidesinbehindthelogoandMenubutton,butitalsoslidesinbehind
thecontent.It’shardtoreadandimpossibletoclick.

Becauseitsparentelement(header)hasaz-indexofauto,thenavelementisstill
partoftherootstackingcontext.Addingz-index: -1shovesittothebottomof
therootelement’sstack,whichmeansitsitsbehindotherelementsintheroot
stackingcontext.

Sohowdowefixthis?Bycreatinganewstackingcontextfornav.Wealreadyknow
thattheopacitypropertywillcreateanewstackingcontextwhenitsvalueisless
than 1 .Butpositionedelementscanalsocreateanewstackingcontextifthez-index
valueissomethingotherthanautoor 0 .Ourheaderelementalreadyhasposi-
tioned: fixed.Nowwejustneedtoaddz-index: 1toitsruleset:^8

(^8) WebKit-andBlink-basedbrowserscreateanewstackingcontextwheneveranelementhasposition:
fixed,evenifitsz-indexvalueisauto.FirefoxandInternetExplorerdonot.
Complex Layouts 145