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
Below are my main takeaways from this episode:
z-indexworks only for the positions that do not have the default position value (aka static)
z-indexcreates 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
2,147,483,647meaning the maximum value for an 32 bit integer
- there is an exception from the staking context - the
selectelement; the dropdown list of a select will always be on top
- the CSS
opacitycreates a stacking context; this means that even if you have not defined a
z-indexfor 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-indexproperty. 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).