Detailed description of CSS stacking order and Stack context

solve the problem without regard to compatibility, the topic of unrestrained, think of what to say, if there is a problem you feel the unusual CSSProperty , hurry up and cram it.

Constantly updated, constantly updated, constantly updated, important things to say three times.

3, stacking order (stacking level) and the stack context (stacking context) know how much?

z-indexIt seems to be very simple, according to the high and z-index low decision cascade priority, actually deep into, will find within the universe.

Take a look at the following question, defining 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>

They are CSS 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 the two P that have a common parent container overlap, are stacked on display:inline-block top, or float:left stacked on top?

Notice the order of the DOM here, which is made display:inline-block by Mister, and then generated 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, is always display:inline-block p stacked on top.

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

The use of logic, the above problems are solved inline-blcok , stacking level higher than 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:

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

4. Has z-index a negative sub-stack context element (the higher the negative, the lower the stacking level)

6. Normal flow layout, non inline-block , sub- position element with no positioning (except static)

8. positionfloat floating element with no positioning (except static)

10. Normal flow layout, inline-block elements, sub- position elements with no positioning (except static) (including Display:table and Display:inline)

12. Owned z-index:0 sub-stack context element

14. Has z-index: a positive sub-stack context element (the lower the lower the stack level)

So our two p comparisons are based on the 4 and 5 listed above. 5 is higher stacking level , so it folds higher.

But! But! But! The point is, please note that the above comparisons are based on two that p are not formed on 堆叠上下文 this basis. Let's revise the topic, give two p , add one 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.

You will see that it is inline-block p not necessarily stacked on top of it, it is float p 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 added opacity:0.9 concept of having two P is generated stacking context（堆叠上下文） . 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 堆叠上下文 ? The following method is excerpted 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 parent element is z-index less than the parent element and another sibling element, and the child element is z-index no higher.

understand the above Stacking-level and stacking-context are key to understanding the stacking order of CSS.