Avoid z-index Mess with CSS Isolation

You have a navbar, a modal, and a tooltip inside that modal:

.navbar   { position: sticky; z-index: 10; }
.modal    { position: fixed;  z-index: 50; }
.tooltip  { position: absolute; z-index: 100; }

Then someone adds a message alert that floats above the page content:

.message { position: fixed; z-index: 60; }

Now the alert bleeds over the modal. You bump the modal to z-index: 80. But now the tooltip inside it pokes through the navbar. You bump the navbar too. Someone adds a sidebar dropdown that needs to sit above the page but below the modal. You add another value. Eventually the stylesheet is full of 999, 9998, 10000, and nobody dares touch them.

The Solution Link to heading

isolation: isolate creates a stacking context without affecting layout — no position, no z-index side effects.

Wrap each component’s root with it:

.modal    { isolation: isolate; }
.dropdown { isolation: isolate; }

Now internal z-index values are scoped locally. You can use 1, 2, 3 inside each component without worrying about conflicts with anything else on the page.