z-index Tip: When creating a reusable component that declares a z-index, add...
z-index Tip: When creating a reusable component that declares a z-index, add this style to the root element:
isolation: isolate
Why? This creates a “stacking context”, which means your z-index won’t “leak out” and override surrounding components.
For more details, see @JoshWComeau excellent post. I didn’t truly understand stacking contexts until I read this. 💡
https://www.joshwcomeau.com/css/stacking-contexts/