Notes about the z-index

DanielJune 15, 2021January 28, 2023

There are few front-end podcasts as good as The CSS Podcast made by Una Kravets and Adam Argyle . And maybe one of the most interesting episodes was about z-index.
Below are my main takeaways from this episode:

• z-index works only for the positions that do not have the default position value (aka static)
• z-index creates stacking contexts, meaning that in a group of elements with a common parent the children can't be escaped the z-index context of the parent. One great case study for this is how we can use React Portals to create popups using the correct stacking context.
• the max value for z-index is 2,147,483,647 meaning the maximum value for an 32 bit integer
• there is an exception from the staking context - the select element; the dropdown list of a select will always be on top
• the CSS opacity creates a stacking context; this means that even if you have not defined a z-index for an element if you define the opacity on it then the children of that element will not be able to go above it
• we can have negative values for the z-index property. This means that an element with a negative z-index will be rendered under most elements unless they have an even lower z-index.

As a conclusion, if there are only two things to remember from all of this keep in mind that the z-index will only work for non-static positioned elements (relative, absolute etc) and that z-index creates a stacking context (you can't position a child above the z-index of its parent).