CSS Master

#f {

background: rgba(255,193,7,.9);

opacity: .99;

}

Theopacitypropertycreatesanewstackingcontextanytimeitsvalueislessthan
1 .Asaresult,thez-indexforitschildelementbecomesrelativetoitsparentrather
thantherootstackingcontext.YoucanseehowthisworksinFigure4.9.Notice
that#gnowoccupiesthetop-mostlayer.^7

Figure 4.9. How opacity affects stacking order

Let’saddanabsolutelypositioneddivelementto#fandgiveitaz-indexvalueof
2 .Nowdivisstackedontopof#f p(seeFigure4.10),butit’sstilllayeredbehind
#gbecause#fhasalocalstackingcontext.Childrenofalocalstackingcontextcan
onlybereorderedrelativetothatcontext.Elementsthatsitinothercontextscan’t
belayeredwithinalocalone.

(^7) Ahandfulofotherproperty-valuecombinationsalsotriggeranewstackingcontext.Thestacking
context
[https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context]
fromMozillaDeveloperNetworkdetailsthemall.
Complex Layouts 141