DEV Community

Discussion on: Why z-index doesn't work all the time 🤯 ?

Collapse
peerreynders profile image
peerreynders

The article does link to the stacking context which lists the various conditions under which a new stacking context is created.

I was focusing on the ones that involved z-index in one way or another - i.e. z-index by itself isn't sufficient for creating new stacking context but it can cause one to be created when other specific declarations are already in place.

Thread Thread
jamesthomson profile image
James Thomson

Right, which makes sense. I just thought for the sake of this article/post it's worth mentioning as some may not realise that transforms can affect the context as well.

Taking from ops example, let's say they want a fixed header and the main area to transition during route changes. Some may not expect adding a transform to main will change the stack: codepen.io/getreworked/pen/JjMrMZQ...

Thread Thread
peerreynders profile image
peerreynders

Creating Stacking Contexts hints at why stacking contexts exist in the first place; some property values need to be contained and isolated to keep things manageable.

Interestingly the Incomplete List of Mistakes in the Design of CSS states that tables and overflow: scroll should have created their own stacking contexts as well.