Stacking Context in CSS

How does the browser decide which element should render first?

• Whichever element was render later will show up first
  • This applies if the position is Sticky
• If the position is not sticky
  • we can think of this as a two staged process, the browser renders static elements first and renders the non-static elements later

How to specify custom stacking order?

• we can use z-index for this
  • element should have position other than static as z-index only works with a particular context i.e relative, fixed or absolute position
  • give elements z-index value representing the order we want
    • for example if we want element 3 overlap element 1
    • element 3 should have z-index higher than element 1
    • ensure all these elements are in same stacking context

How to create a stacking context?

• Setting opacity to a value less than 1
• Setting position to fixed or sticky (No z-index needed for these values!)
• Applying a mix-blend-mode other than normal
• Adding a z-index to a child inside a display: flex or display: grid container
• Using transform, filter, clip-path, or perspective
• Explicitly creating a context with isolation: isolate