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.
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...
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.
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-indexin one way or another - i.e.z-indexby 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.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
transformtomainwill change the stack: codepen.io/getreworked/pen/JjMrMZQ...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: scrollshould have created their own stacking contexts as well.