DEV Community

Discussion on: CSS z-index illustrated

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 • 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
 
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.

πŸ‘