Stacking order and Stack context know how much

what is the stacking order (stacking level) and the stack context (stacking context)?

Z-index seems to be very simple, according to the high and low level of Z-INDEX decided to cascade priority, but actually deep into, will find within the universe.

Take a look at the following question, which defines two p a and B, which are included under the same parent P tag. The HTML structure is as follows:

<p class= "Container" >    <p class= "Inline-block" > #pA display:inline-block</p> <p    class= " Float "> #pB float:left</p></p>

Their CSS is defined as follows:

. container{    position:relative;    Background: #ddd;}. Container > p{    width:200px;    height:200px;}. float{    Float:left;    Background-color:deeppink;}. inline-block{    Display:inline-block;    Background-color:yellowgreen;    margin-left:-100px;}

Presumably, it means that two P with a common parent container overlap, is display:inline-block stacked on top, or float:left stacked on top?

Note here the order of the DOM, is Mr. Display:inline-block, and then generate Float:left. Of course, the two DOM sequence can also be reversed as follows:

<p class= "Container" >    <p class= "float" > #pB float:left</p> <p    class= "Inline-block" > #pA display:inline-block</p></p>

Will find that, regardless of the order, the Display:inline-block is always the top of the P stack.

The demo poked me.

<p class= "Container" >    <p class= "Inline-block" > #pA inline-block</p> <p    class= "float" > #pB float:left</p></p><p class= "container" >    <p class= "float" > #pB float:left</p >    <p class= "Inline-block" > #pA inline-block</p></p>

Here is actually involved in the so-called cascade level (stacking levels), there is a picture can be very good interpretation:

Using the logic, the above topic is solved, inline-blcok of the stacking level is higher than the float, so regardless of the DOM sequence is stacked on top.

However, there are some inaccuracies in the above illustration, according to the official W3, the exact 7-storey:

2. The background and borders of the element forming the stacking context.

4. The child stacking contexts with negative stacks levels (most negative first).

6. The In-flow, Non-inline-level, non-positioned descendants.

8. The non-positioned floats.

10. The In-flow, Inline-level, non-positioned descendants, including inline tables and inline blocks.

12. The child stacking contexts with a stack level 0 and the positioned descendants with a stack level 0.

14. The child stacking contexts with positive stack levels (least positive first).

A little translation:

1. Background and border of elements that form the stacking context

2. A sub-stack context element with negative z-index (the higher the negative, the lower the stacking level)

3. Normal flow layout, non-inline-block, no position positioning (except static) child elements

4. float floating element with no position positioning (except static)

5. Normal flow layout, inline-block element, child elements without position (except static) (including Display:table and Display:inline)

6. Own z-index:0 The child stacking context element

7. A sub-stack context element with positive z-index: (lower and lower stacking level)

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

But, but! The emphasis is on, note that the comparison above is based on the two P not forming a stacking context. Let's revise the topic, give two P, add a opacity:

. container{    position:relative;    Background: #ddd;}. Container > p{    width:200px;    height:200px;    opacity:0.9; Note here, add a opacity}.float{    float:left;    Background-color:deeppink;}. inline-block{    Display:inline-block;    Background-color:yellowgreen;    margin-left:-100px;}

The demo poked me.

As you can see, Inline-block p is no longer bound above the p of float, but is related to the stacking order of the DOM in the HTML code, and the added P will stack above the added p.

The key point here is that the addition of the opacity:0.9 this allows two p to generate the concept of the stacking context (stacking contexts). At this point, to cascade the two, you need to Z-index, the higher the Z-index the higher the Cascade hierarchy.

The stacking context is a three-dimensional concept of HTML elements that extend over the z-axis of an imaginary user on a window or Web page that is oriented towards (a computer screen), and the HTML element occupies the space of the cascading context according to its own attributes in order of precedence.

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

• root element (HTML),

• The Z-index value is not an absolute/relative positioning of "auto",

• A Flex project (Flex Item) with a Z-index value other than "auto", that is: parent element Display:flex|inline-flex,

• Opacity element with a property value of less than 1 (refer to the specification for opacity),

• The Transform property value is not an element of "none",

• The Mix-blend-mode property value is not an element of "normal",

• The filter value is not an element of "none",

• The perspective value is not a "none" element,

• The isolation property is set to the element "isolate",

• Position:fixed

• Any CSS properties are specified in Will-change, even if you do not directly specify the values of these properties

• The-webkit-overflow-scrolling property is set to the "touch" element

So, the purpose of adding the opacity attribute to two p above is to form the stacking context. That is to say, adding opacity to these properties is the same effect as the one listed above.

In a cascading context, its child elements are also stacked according to the rules explained above. It is particularly noteworthy that the Z-index value of its child elements is only meaningful in the parent cascade context. This means that the z-index of the parent element is lower than the parent element and another sibling element, and the child element z-index higher is useless.

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