Better z-indexing Using Isolation
Managing z-indexing can be a real pain at times. Dealing with many different
elements, all of which have to specify different z-index values to ensure the
correct stacking context. Thankfully, the CSS isolation
property can help
remove some of the hassle.
When the isolation
property is set to isolate
, it will create a new
stacking context
for the element which it is applied to. This is useful to “isolate” the
z-index
values of an element’s children so you are free to use any z-index
values without causing those children to “escape” the element.
.grandparent { z-index: 20;}.parent { isolation: isolate;}.child { /* This will not overlap .grandparent, even though it's z-index is higher */ z-index: 100;}
I really hope to write a full blog post about z-index
and stacking context
since it’s so difficult to explain in just a few short sentences. Until then,
read up on stacking contexts, z-index
, and isolation
and you’ll thank
yourself for doing so!