About z-index and positions

Question

I'm reading this article on z-index and got a question.

enter image description here

The z-index is like the layers, right? then layer(z-index) 1 should be on the top, two, three and on.

How come in this picture z-index 3 is above 2?

I saw that the two had different positions:

Div 3 is absolute so it goes out of context with everything else, but does that even apply to the 'layers'?

Answer 1

Remember that z-index refers to elements being stacked on an imaginary z-axis which is perpendicular to the screen.

Here's the image from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context

The z-index is like the layers, right? Yes

then layer(z-index) 1 should be on the top, two, three and on. No - In the same stacking context, the element with the higher number z-index is on top. Hence div 1 (z-index 5) is above (ie closer to the viewer) than div 3.

How come in this picture z-index 3 is above 2? Becase 3 is bigger than 2

Div 3 is absolute so it goes out of context with everything else, Not exactly. It itself is stacked with div1 and div2, those three divs are in the same stacking context. However, as div3 is positioned absolute, it forms a stacking context of its own and its children are stacked within that.