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
is2,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 az-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).
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.