Notes about the z-index

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.
• 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).

I hope you have enjoyed this article and if you would like to get more articles about React and frontend development you can always sign up for my email list.

Newsletter subscribe: