Understanding Stacking Context

This conveys a sense of detailed explanation and guidance for web developers.

Have you ever found yourself setting a z-index to an astronomical value like 1000000, only to scratch your head when it seemingly has no effect? Or perhaps you've encountered the challenge of positioning two items on top of each other, only to realize it's not as straightforward as expected?

Knowing how the stacking context works in CSS is important for solving these problems. In this complete guide, we'll explore the complex topic of stacking order. We will explain why some usual methods may not get you good results and how understanding context from your web page can make it easy to control layered items. Come with us as we make the world of CSS stacking order easy to understand.

this topic is not hard but it’s little tricky and we always skip this kind of information, for that I will mention the times when we create stacking contexts.

1. Simple Page: / root element /

so if we set the position on Navbar to absolute it will be absolute for the html root document, I know this is very simple but this is how we should see the big picture.

2. Simple div with relative: / z-index /

   

   this shows what will happen to the stacking context When we set the position of a div to relative.

common Misconception: a lot of us think that { position: absolute; } will look only for any relative parent, but the truth is it will go for any not static parent which is the default.

based on what we said above we can make absolute position based on absolute position.
In this article my main concern is not to explain z-index or any css properties so I have left for all the properties we used, incase you want to check them.

<div style="position: absolute; width:150px; height:150px; background-color: red; left:50%; top:100px;">
  <div style="position: absolute; width:10px; height:10px; top: calc(50% - 5px);left:calc(50% - 5px); background-color: green;">
  </div>
</div>

This is a simple example demonstrating how we can have a non relative parent div yet the child div will still be positioned relatively to this parent.

although z-index is one of the main usages of the understanding of stacking context, but there are also some stuff that creates a stacking context we will continue explaining the concepts.

3. elements with opacity less than 1

   e.g. { opacity: 0.7 }

4. Transforming the element:

   • when transform to anything other than none.

   • when transform-style to preserve-3d.

   • when perspective to anything other than none.

   
   I guess all those properties are very simple where perspective is a little tricky I suggest you to read this article.

5. filter effects, setting filter to anything other than none.

6. compositing

   • when { isolation: isolate }

   • when mix-blend-mode value different from normal

---

there is also Painting order which is part of the stacking context, painting order has nothing complex it is just how the browser will render stuff, it could one of these weird interview questions, so I would suggest you to read more about from the official documentation.

last but not least you can check the stacking context using this chrome extension.

I wanted to know your opinion about next article:

Thank you for joining me on this exploration of Stacking Context. Let's continue this journey together, embracing the unknown and reveling in the richness of knowledge that CSS offers. Until next time, happy exploring!