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!