šŸ“• LangChain for JavaScript developers is now out!
Build 5 Next.js apps with ChatGPT integrated features using LangChain.

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

šŸ“– 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.


Leave a Reply

Your email address will not be published. Required fields are marked *