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!