All geek questions in one place

Confusion About z-index

The article in the following link states that z-index styling applies only to sibling elements: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

But the snippet below shows that divs that have different parents are folded depending on the z-index. Overlay remains above the text and below the text box, even if the text and text box belong to the same parent, but not the overlay. How is this possible under this article?

.overlay { background-color: rgba(0, 0, 0, 0.5); display: block; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 2; } 
 <div class="overlay" style="display: block;"></div> <div> <div> Some text that will remain under the overlay. </div> <div style="width:1000px;"> <div style="width:50%;position:relative;z-index:2;"> <div> <input style="width:80%;"> </div> </div> </div> </div>
+5
source share
2 answers

The problem is that your z-index comparison starts with the first relative or absolute element. So basically css z-index ignores all elements that have a static position.

  <div class="overlay" style="display: block;"></div> <div style="position:relative;z-index:3;"> <div> Some text that will remain under the overlay. </div> <div style="width:1000px;"> <div style="width:50%;"> <div> <input style="width:80%;"> </div> </div> </div> </div>

I think this will work for you.

+1
source

The documentation reads:

Each stacking context is completely independent of its siblings: only descendant elements are taken into account when processing stacks.

This does not mean that the context of the element itself is not dependent on its brothers and sisters, but it does mean that they are children.

Note that stacking contexts live in "positioned elements." Positioned items are items with a position of "relative", "absolute" or "fixed" and z-index. Only positioned elements are installed. In this case, there are only two positioned elements. They themselves add contexts, as does their closest positional ancestor. However, these elements do not seem to have a (common) positional ancestor. Based on this, we can say the following:

These elements relate to the same positioned ancestor (stacking context): viewport. Therefore, z-indices give the expected results (upper value of the z index). An equal z-index appears in the reading order (last on top).

Creating another positioned ancestor violates this behavior, as Leonid shows. This is because it creates a new independent stack context.

Adding opacity to the second div also violates this behavior, since the elements that need to be redrawn (oddly enough) are treated as positioned elements (new stacking contexts):

 <div class="overlay" style="display: block;"></div> <div style="opacity: 0.99;">...</div>

See this in action: http://codepen.io/anon/pen/ENrOGx

Still not getting it?

Read the Philip Waltons article: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ . He explains it very well.

PS. Who doesn't like the good STACKING question about STACK overflow?

-1
source

Source: https://habr.com/ru/post/1261516/

More articles:


All Articles