The best overview of z-index
and stacking contexts that I've come across, plus it keeps getting better as Josh extends the useful tools section ππ
Top of the tips is isolation:Β isolate
, a very useful CSS function that I never remember; it effectively resets the stacking context, which means it's particularly useful for component-based UI structures.
Also a worthy shout-out to the CSS Stacking Context Inspector plugin (also available for Chrome). It's already helped me locate a rogue stacking context being created by a global opacity
attribute (of all things π).