DEV Community

CSS z-index illustrated

Natalia Venditto on July 27, 2021

My followers know that I no longer work as a frontend developer, however, I worked as one for nearly 15 years and I was self-taught. I was lucky to...
Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
anfibiacreativa profile image
Natalia Venditto

A stacking context will simply tell you where each element belong because we have another important concept which is the painting order and this one will decide which element will be above or below another one.

The importance of order is already mentioned in the article, although I don't refer to it by the technical term "painting order"

Thread Thread
 
Sloan, the sloth mascot
Comment deleted
 
anfibiacreativa profile image
Natalia Venditto

Yes, that's a nuance. But it definitely weighs in the decision.

Collapse
 
anfibiacreativa profile image
Natalia Venditto

Actually position: XYZ other than static does create a stacking context as I supposed developer.mozilla.org/en-US/docs/W...

And point number 5 of the documentation.

All non-positioned floating descendants, in tree order. For each one of these, treat the element as if it created a new stacking context, but any positioned descendants and descendants which actually create a new stacking context should be considered part of the parent stacking context, not this new one.

w3.org/TR/CSS2/zindex.html

Collapse
 
Sloan, the sloth mascot
Comment deleted
 
anfibiacreativa profile image
Natalia Venditto

Yes, only if z-index is different than auto is true and it's already described in the article. When you give it a position and no z-index at all computed, it also works.

👍

Collapse
 
Sloan, the sloth mascot
Comment deleted
 
anfibiacreativa profile image
Natalia Venditto • Edited

I think we are simply saying exactly the same only that you are going a lot more in-depth than I intended in this article. I did not describe all the edge cases and potential implications because I invited readers to delve in the docs. But it’s cool, however I feel a disconnect when you mention terms such as DOM and tree hierarchy which I never used through my article. I spoke about document flow only. And also some corrections made on incorrect interpretation. So at this point I feel we could reconduct the debate and focus on the original point of the article which I think satisfies the intention. Great talking to you!

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
anfibiacreativa profile image
Natalia Venditto

That's true. It can also be auto.

Collapse
 
anfibiacreativa profile image
Natalia Venditto

I am not sure I say the viewport is a stacking context. I illustrate the stacking context with respect to the viewport.

Collapse
 
Sloan, the sloth mascot
Comment deleted
 
anfibiacreativa profile image
Natalia Venditto

No, I never say the viewport is a stacking context. I just illustrate it so there is a reference.