CSS cascading contexts, cascading levels, stacking order, Z-index

In the past, because of their own use z-index of a small frequency, so there is a relatively partial understanding of this CSS property. has always been considered z-index to be used to describe the stacking order in which an element is defined on the screen Z轴 . z-indexthe larger the value, the moreZ轴

, the closer the viewer is to the screen. Finally, we found that there are a lot of problems in this cognition:

1. First, the z-index property value does not have an effect on any element. It works only on elements that are positioned (attributes are defined and position attribute values are non- static valued).
2. Judging the stacking order of the elements Z轴 , not just the size of the values of the two elements directly, z-index this stacking order is actually determined by the Cascade context and cascade level of the elements.

To fully understand a thing, first understand what it is, that is, its definition. Let's take a look at the above mentioned 层叠上下文 , 层叠等级 层叠顺序 what is it? The definition is too abstract, and a figurative metaphor will be used later.

Let you know exactly what they are and what they are connected to.

What is a "cascading context"

cascading contexts (stacking context) is a three-dimensional concept in HTML. In the CSS2.1 specification, the position of each box model is three-dimensional, which is on a flat canvas and X轴 Y轴 represents a cascade Z轴 . In general, elements are

On the page along the X轴Y轴 tile, we don't notice the Z轴 cascading relationships on top of them. Once the element is stacked, it can be found that an element might overwrite another element or be overwritten by another element.

If an element has a cascading context, (that is, it is a cascading context element), we can understand that this element is Z轴 "Superior" on top, and the final manifestation is that it is closer to the screen viewer.

What is "cascade level"

So what does cascade rank mean? Cascading levels (stacking level, called "cascade levels"/"cascade levels")

• In the same cascading context, it describes what defines the upper and lower order of the cascading context elements in the context of the Cascade Z轴 .
• In other common elements, it describes the Z轴 upper and lower order in which these ordinary elements are defined.

Speaking of which, there may be a lot of questions, whether in the cascade context or in the ordinary elements, the cascade level represents the upper and Z轴 lower order of elements, it is directly said that it defines all the elements in Z轴 the upper and lower order on the OK Ah! Why are they described separately?

To illustrate the reason, first raise a chestnut:

figurative metaphor: As we said before, elements that are in a cascading context, like elements, are naturally higher than ordinary elements. Imagine, suppose an officer A is a provincial leader, his subordinate has a secretary A-1, home has a nanny a-2. Another official, B, is a county-level leader who has a secretary B-1, who has a nanny b-2 at home. A-1 and B-1 are secretaries, but do you think there is comparability between a provincial-led secretary and a county-headed secretary? Even the nanny a-2 is much higher than the secretary B-1 's rank. Who is big who is small, who is high who low glance, so there is no comparative significance. Only in the A-1 of a subordinate, A-2 and b subordinate of B-1, b-2 in the comparison of the size of each other is meaningful.

By analogy back to "cascade context" and "cascade level", a conclusion is drawn:

1. The cascading level precedence of a common element is determined by the stacking context in which it resides.
2. Cascading level comparisons are only meaningful in the current cascading context element. It is meaningless to compare cascading levels in different stacking contexts.

That's all there is to know about "cascading contexts" and "cascading levels," and one of the most critical questions: How do you create cascading contexts? How do you make an element a cascading context element?

In fact, the cascading context is basically a few specific CSS properties created, generally there are 3 ways:

1. HTMLThe root element itself, J, has a cascading context, called the root cascade context.
2. The normal element sets the property to a position non- static value and sets the z-index property to a specific numeric value, resulting in a cascading context.
3. The new properties in CSS3 can also produce cascading contexts.

Chestnut 1: There are two div,p.a, p.b wrapped in a div, p.c wrapped in another box, only for. A,. b,. C SettingspositionAndz-indexProperty

<style>  Div {      position:relative;      width:100px;      height:100px;    }    p {      Position:absolute;      font-size:20px;      width:100px;      height:100px;    }    . a {      background-color:blue;      z-index:1;    }    . b {      background-color:green;      Z-index:2;      top:20px;      left:20px;    }    . c {      background-color:red;      Z-index:3;      Top: -20px;      left:40px;    } </style><body>    <div>      <p class= "a" >a</p>      <p class= "B" >b</p >    </div>   <div>      <p class= "C" >c</p>    </div>  

　　

Because the P.A, P.B, p.c Three parent element Div are not setz-index, so no cascading context is generated, so. A,. b,. c are all in theThe tag produces a "root cascade context" that belongs to the same cascading context, at which point thez-indexThe value is large, who is on top.

Chestnut 2: There are two div,p.a, p.b wrapped in a div, p.c wrapped in another box, with two div and. A,. b,. C Settings position and z-index properties

<style>  Div {    width:100px;    height:100px;    position:relative;  }  . box1 {    z-index:2;  }  . Box2 {    z-index:1;  }  p {    Position:absolute;    font-size:20px;    width:100px;    height:100px;  }  . a {    background-color:blue;    z-index:100;  }  . b {    background-color:green;    top:20px;    left:20px;    z-index:200;  }  . c {    background-color:red;    Top: -20px;    left:40px;    z-index:9999;  } </style><body>  <div class= "Box1" >    <p class= "a" >a</p>    <p class= "B" >b</p>  </div>  <div class= "Box2" >    <p class= "C" >c</p>  </ Div></body>

　　

We sent down, thoughp.cElements ofz-indexA value of 9999, far greater thanp.aAndp.bOfz-indexValue, but becausep.a、p.bThe parent elementdiv.box1Generated by the CASCADE context.z-indexHas a value of 2,p.cThe parent elementdiv.box2Generated by the CASCADE context.z-indexValue of 1, sop.cAlways inp.aAndp.bBelow.

At the same time, if we only change p.a p.b the value of and z-index , since both elements are in the context of the cascade generated by the parent element, the div.box1 value of who is z-index larger, who is above.

What is "stacking order"

After saying "cascade context" and "cascade level", let's say "stacking order". The Cascade Order (stacking order) indicates that elements are Z轴 displayed vertically on top of a particular sequence of rules as they occur.

Thus, the "cascade context" and "cascade level" mentioned above are a concept, and the "stacking order" here is a rule.

Without considering the CSS3, when the element is stacked, the Cascade Shun follows the rules on the way.It is worth noting here:

1. The upper-left "cascading context background/border " refers to the background and border of the cascading context element.
2. inline/inline-blockThe stacking order of elements is higher than block (block level)/ float (floating) elements.
3. Simply consider the stacking order, z-index: auto and z-index: 0 at the same level, but the two attribute values themselves are fundamentally different.

For 2nd above, whyinline/inline-blockThe stacking order of the elements is higher thanblock(Block-level)/float(floating) Element? We can think about this! It's actually very simple, likeborder/backgroundAttributes belonging to decorative elements, floating and block-level elements are generally used for page layout, and the beginning of web design is the most important thing is the text content, so in the event of cascading will be the first display of text content, to ensure that it is not overwritten. 1, first see whether the two elements to compare is in the same cascade context: 1.1 If it is, who is the cascade level, who is on top (how to determine the Cascade level?)        --Look at the "stacking order" graph). 1.2 If two elements are not in the unified cascading context, first compare the cascading levels of the cascading contexts in which they are located. 2, when the two elements cascade the same level, the stacking order is the same, in the DOM structure behind the elements cascade level above the preceding elements.

<style>  . Box1,. box2 {    position:relative;    Z-index:auto;  }  . child1 {    width:200px;    height:100px;    Background: #168bf5;    Position:absolute;    top:0;    left:0;    z-index:2;  }  . child2 {    width:100px;    height:200px;    Background: #32c292;    Position:absolute;    top:0;    left:0;    z-index:1;  } </style>
　　
.box1/.box2While setting theposition: relativeButz-index: autoThe case that the twodivor normal element, and does not produce a cascading context. Sochild1/.child2Belong toelement in the root cascade context, at which point theWhose  z-index value is big, who's on top。 For the CSS code in the above code, we only put.box1/.box2Ofz-indexProperty value to数值0, the rest does not change.
. Box1,. box2 {  position:relative;  z-index:0;}
　　
At this point, we found that only the modified.box1/.box2Ofz-indexProperty value to数值0, the end result is exactly the opposite. Then.child2Covered in the.child1Above. What is the reason? Very simple: Because the settingsz-index: 0After.box1/.box2Create their own cascading contexts, this time to compare.child1/.child2The cascade relationship is entirely by the parent element.box1/.box2Cascade Relationship decision. But.box1/.box2Ofz-indexValues are0, are block-level elements (so they cascade hierarchically, stacking order is the same), in which case theDOMStructure inThe back covers the frontSo.child2It's on top.
The effect of attributes in CSS3 on cascading contexts
Many new properties appear in CSS3, some of which have a significant impact on the cascading context. As follows:

 
    
 
     
 
      
The Display property value of the parent element is flex|inline-flex , when the child element z-index property value is not auto , the child element is a cascading context element;
 
      
The attribute value of the element opacity is not 1 ;
 
      
The attribute value of the element transform is not none ;
 
      
Element mix-blend-mode属性值不是 normal ';
 
      
The attribute value of the element filter is not none ;
 
      
The attribute value of the element isolation is isolate ;
 
      
will-changeThe specified property value is any of the above;
 
      
attribute value of the element -webkit-overflow-scrolling is set totouch
 
     
 
    

Magiceyes
Links: Https://juejin.im/post/5b876f86518825431079ddd6
Source: Denver Nuggets
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.
Reprint: Https://juejin.im/post/5b876f86518825431079ddd6





CSS cascading contexts, cascading levels, stacking order, Z-index