How to avoid Z-INDEX war

1. Sensible DOM order with occasional z-index

By the natural flow of DOM order, the elements created later with non-static positions like position: absolute or position: relative can cover the elements created earlier.

2. Isolation: isolate

After z-index is defined, it may cause unexpected behaviour where the earlier element, <Heading/> covers up later element, <Help/>. This is because both <Heading/> and <Help/> share the same global stack context and <Heading/> has got higher z-index .

// css, to put the heading into a separate stacking context
.heading-wrapper {
isolation: isolate;
}

3. Isolate <div id=”root” /> for Modal

If we use UI component libraries like Reach-UI, the DOM of the modal usually gets inserted below the root element, <id id="root" /> if using React. While all of the other elements in the app are most likely rendered inside the root element, the Modal, that gets rendered below would usually appear on the very top of the page when called open — if there is no other higher z-index in the stacking context.

#root{
isolation:isolate;
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sherry Hsu

Sherry Hsu

311 Followers

A software engineer passionate about learning and growth