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
property can help remove some of the hassle.
isolation property is set to
isolate, it will create a new
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.
/* This will not overlap .grandparent, even though it's z-index is higher */
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,
you’ll thank yourself for doing so!