How much do you know about stacking order and stacking context

Take a look at the following question, define two divs A and B to be included under the same parent div tag. The HTML structure is as follows:

<div class="container">
    <div class="inline-block">#divA display:inline-block</div>
    <div class="float"> #divB float:left</div>
</div>

Their CSS definitions are as follows:

.container{
    
    
    position:relative;
    background:#ddd;
}
.container > div{
    
    
    width:200px;
    height:200px;
}
.float{
    
    
    float:left;
    background-color:deeppink;
}
.inline-block{
    
    
    display:inline-block;
    background-color:yellowgreen;
    margin-left:-100px;
}

Roughly speaking, it means that two DIVs that have the same parent container overlap each other. Is display:inline-block stacked on top, or float:left stacked on top?

Note that the order of the DOM is to generate display:inline-block first, and then float:left. Of course, you can also switch the order of the two DOMs as follows:

<div class="container">
    <div class="float"> #divB float:left</div>
    <div class="inline-block">#divA display:inline-block</div>
</div>

You will find that regardless of the order, the div with display:inline-block is always stacked on top.
This actually involves the so-called stacking level. There is a picture that can be well explained:

using the logic of the above figure, the above problem can be easily solved. The stacking level of inline-blcok is higher than that of float, so regardless of DOM The order is stacked on top.

However, the statement above is somewhat inaccurate. According to the official W3 statement, the accurate 7th floor is:

1、the background and borders of the element forming the stacking context.
2、the child stacking contexts with negative stack levels (most negative first).
3、the in-flow, non-inline-level, non-positioned descendants.
4、the non-positioned floats.
5、the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
6、the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
7、the child stacking contexts with positive stack levels (least positive first).

A little translation:

1. The background and border of the elements that form the stacking context
2. Sub-stacking context elements with negative z-index (the higher the negative, the lower the stacking level)
3. The normal flow layout, non-inline-block, no position positioning Sub-elements
(except static) 4. Float elements without position positioning (except static)
5. Normal flow layout, inline-block elements, sub-elements without position positioning (except static) (including display: table and display: inline)
6. Sub-stacking context elements with z-index:0
7. Sub-stacking context elements with positive z-index: (the lower the positive, the lower the stacking level)

So the comparison of our two divs is based on the 4 and 5 listed above. The stacking level of 5 is higher, so the stacking is higher.

but! but! but! Here comes the important point. Please note that the above comparison is based on the fact that neither of the two divs form a stacking context. Let's modify the title and add an opacity to two divs:

.container{
    
    
    position:relative;
    background:#ddd;
}
.container > div{
    
    
    width:200px;
    height:200px;
    opacity:0.9; // 注意这里，增加一个 opacity
}
.float{
    
    
    float:left;
    background-color:deeppink;
}
.inline-block{
    
    
    display:inline-block;
    background-color:yellowgreen;
    margin-left:-100px;
}

You will see that the inline-block div is no longer necessarily stacked on the float div, but is related to the stacking order of the DOM in the HTML code, and the div added later will be stacked on the div added first.

The key point here is that the added opacity:0.9 allows both divs to generate the concept of stacking context. At this time, z-index is required to arrange the two layers in a layered manner. The higher the z-index, the higher the layered layer.

Stacking context is a three-dimensional concept of HTML elements. These HTML elements extend on an imaginary z-axis relative to the user facing (computer screen) windows or web pages. HTML elements occupy the space of stacking contexts in order of priority according to their own attributes. .

So, how to trigger an element to form a stacking context? The method is as follows, taken from MDN:

Root element (HTML),
absolute/relative positioning whose
z-index value is not "auto", and a flex item whose z-index value is not "auto", namely: parent element display: flex|inline-flex ,
Elements whose opacity attribute value is less than 1 (refer to the specification for opacity), elements whose
transform attribute value is not "none", elements whose
mix-blend-mode attribute value is not "normal", and those whose
filter value is not "none" Element, the element
whose perspective value is not "none", the element whose
isolation attribute is set to "isolate",
position: fixed
has any CSS properties specified in will-change, even if you do not directly specify the value of these properties
-webkit-overflow -Elements whose scrolling attribute is set to "touch"

Therefore, the purpose of adding the opacity attribute to the two divs above is to form a stacking context. That is to say, adding opacity and replacing them with the attributes listed above can achieve the same effect.

In the context of stacking, its child elements are also stacked in accordance with the rules explained above. It is particularly worth mentioning that the z-index value of its child element is only meaningful in the context of the parent stacking. This means that the z-index of the parent element is lower than that of another element at the same level of the parent element, and the z-index of the child element is useless no matter how high it is.

Understanding the above stacking-level and stacking-context is the key to understanding the stacking order of CSS.

The content of the article is reprinted at https://mp.weixin.qq.com/s/Qaduz-ogRgI47G_sSA_b-w.
After reading it, I find it very useful. Put it here to record it for later review.
If there is any infringement, contact the blogger to delete