cascading contexts and stacking order in CSS

Copy @ from http://www.zhangxinxu.com

Four, must remember the stacking guidelines

The following two are the golden rules for cascading fields. The overlay relationship follows the following 2 guidelines when an element is stacked:

1. who is big on: when there is an obvious cascade level indicator, such as the recognition of the Z-INDX value, in the same cascading context, the cascade horizontal value of the big one covering the small one. Popular speaking is the official big pressure death officer small.
2. Catch up : when elements are stacked horizontally and stacked in the same order, the elements that are in the back of the DOM flow will overwrite the preceding elements.

In the field of CSS and HTML, as long as the elements overlap, it is inseparable from the above two golden rules. Because there will be more than one instance description, here is the end.

V. Characteristics of cascading contexts

Cascading context elements have the following characteristics:

• The stacking level of the cascade context is higher than the normal element (the reason is explained later);
• Cascading contexts can block mixed patterns of elements (see the second part of this article);
• Cascading contexts can be nested, and the inner cascading context and all its child elements are subject to the outer cascading context.
• Each cascading context and sibling element is independent, that is, when cascading changes or rendering, only the descendant elements are considered.
• Each cascading context is self-contained, and when the elements cascade, the entire element is considered to be in the cascade order of the parent cascade context.
• It seems that most common, z-index is not necessary to appear at all. Know that the cascade level of inline elements is higher than the block elements, so, a line you want to cover up the time, you need to set position:relative it? No need, inline-block it can be. Because Ie6/ie7 position:relative creates cascading contexts, it's annoying

• ③. CSS3 and the cascade context of the new era
  The advent of CSS3, in addition to bringing new attributes, also challenged many of the rules of the past. For example, CSS3 the transform effect of overflow hiding on position:fixed positioning. And here, the cascading context of this piece of the impact is more extensive and significant.

  As follows:

  1. z-indexThe value is not an auto flex item (parent element display:flex|inline-flex ).
  2. The value of the element opacity is not 1 .
  3. The value of the element transform is not none .
  4. The element mix-blend-mode value is not normal .
  5. The value of the element filter is not none .
  6. The value of the element isolation is isolate .
  7. will-changeThe specified property value is any one of the above.
  8. The element is -webkit-overflow-scrolling set to touch .

  Basically every item has a lot of slots.

  1. Display:flex|inline-flex and cascading contexts
  Note that the rules here are somewhat complex. To meet two conditions to form a cascading context: Condition 1 is the parent needs to be display:flex or display:inline-flex level, condition 2 is the z-index of the child element is not auto , must be a numeric value. At this point, the child element is a cascading context element, yes, note that it is a child element, not a flex parent element.

  Seeing is believing, let's give you an example.

  The following HTML and CSS code:

  <div class= "box" >    <div>        </div></div>

  . box {  }.box > div {background-color:blue; z-index:1;}    /* At this time the div is a normal element, Z-index invalid */.box > div > img {   position:relative; Z-index:-1; right: -150px;     /* Note that this is a negative z-index */}

  The results are as follows:

  Will find that the sister ran under the blue background. Why is it? The Cascade sequence diagram can find the answer, as follows:
  

  You can see that the stacking order of the negative z-index is below the block horizontal element, and the blue background div element is a common element, so the sister crosses through the past and displays behind the blue background.

  Now, with our CSS trimmer, add display:flex the following:

  . box {Display:flex;}. Box > div {background-color:blue; z-index:1;}    /* At this point the div is a cascading context element, while the z-index takes effect */.box > div > img {   position:relative; Z-index:-1; right: -150px;     /* Note that this is a negative z-index */}

  Results:

  Will find, sister on the blue background shows, why? The Cascade sequence diagram can find the answer, as follows:
  

  You can see that the stacking order of negative values z-index is above the current first parent cascade context element, and at this point the z-index 1 value of the parent element of the blue background of the value <div> display is flex , suddenly ladder into a cascading context element, so, The picture is shown above the blue background. This behavior also confirms that the cascading context element is a flex child element, not a flex container element.

  In addition, this example also overturns our traditional understanding of the pair z-index . In the CSS2.1 era, z-index attributes had to be used in conjunction with positioned elements, but in the CSS3 world, non-locating elements could also be z-index easily and happily based.

  2. Opacity and cascading contexts
  We look directly at the code, and the same principle as the example above does not explain.

  The following HTML and CSS code:

  <div class= "box" >    </div>

  . box {background-color:blue;  }. Box > img {   position:relative; Z-index:-1; right: -150px;}

  The results are as follows:

  Then the price transparency, for example 50% transparent:

  . box {background-color:blue; opacity:0.5;  }. Box > img {   position:relative; Z-index:-1; right: -150px;}

  The results are as follows:

  The reason is that the translucent elements have a cascading context, sister pictures z-index:-1 can not penetrate, so, on the blue background is shown obediently.

  3. Transform and cascading contexts
  Elements that have the transform transform applied also have a menu context.

  We directly look at the results after the application, the following CSS code:

  . box {background-color:blue; transform:rotate (15deg);  }. Box > img {   position:relative; Z-index:-1; right: -150px;}

  The results are as follows:

  Sister is also above the blue background.

  4. Mix-blend-mode and cascading contexts
  mix-blend-modeSimilar to the blending mode in PS, previously specifically an article Introduction-"CSS3 Mixed Mode Mix-blend-mode Introduction".

  element and white background blend. Either way, it's all white, or there's no change. In order to make people feel intuitive, so the following example I specifically added an original tile background:

  . box {background-color:blue; mix-blend-mode:darken;  }. Box > img {   position:relative; Z-index:-1; right: -150px;}

  The results are as follows:

  It is important to note that currently, IE (including IE14) is not supported mix-blend-mode , so if you want to see your sister on the background color, please use Chrome or Firefox.

  Similarly, because the blue background element is upgraded to a cascading context, it z-index:-1 cannot penetrate and is displayed on a blue background.

  5. Filter and Cascade context
  Here is the filter standard filter in CSS3, not those of the old IE era, although the purpose is similar. Similarly, I have mentioned before, such as the grayscale of the sample or the glass effect of the picture.

  We use the usual blur effect to indicate the following:

  . box {background-color:blue; Filter:blur (5px);  }. Box > img {   position:relative; Z-index:-1; right: -150px;}

  The results are as follows:

  Well, sure enough, you guessed right, sister blue bed lying, just your glasses picked, see some not real.

  6. Isolation:isolate and cascading contexts
  isolation:isolateThis statement was mix-blend-mode born. By default, the mix-blend-mode z-axis is blended with all the elements stacked below, what if we don't want a cascade of elements to participate in the mix? is to use isolation:isolate . Because of the long story, I specifically wrote an article: "Understanding the performance and role of CSS3 Isolation:isolate", explaining the principle of its barrier mixing mode, we suggest you look.

  To demonstrate this effect, I need to redesign the following HTML structure:

  <div class= "box" >    </div>

  The main code of CSS is as follows:

  . mode {/  * Vertical Sister absolute positioning, simultaneous blending mode */  position:absolute; mix-blend-mode:darken;}    . box {  background:blue;         }. Box > img {   position:relative; Z-index:-1;}

  The structure is as follows:

  Will find that the cross sister has been mixed mode. At this point, we add the container to isolation:isolate the sister, as shown in the following CSS:

  . mode {/  * Vertical Sister absolute positioning, simultaneous blending mode */  position:absolute; mix-blend-mode:darken;}    . box {  background:blue; isolation:isolate;         }. Box > img {   position:relative; Z-index:-1;}

  The result is:

  Will find the cross of the sister ran to the blue background. This indicates that a cascading context has indeed been created.

  7. Will-change and cascading contexts
  will-changeIf you have a classmate who doesn't understand it, see the article I wrote earlier: "Use CSS3 will-change to improve rendering performance with page scrolling, animations, and more."

  are similar to the demo code:

  . box {background-color:blue; will-change:transform;  }. Box > img {   position:relative; Z-index:-1; right: -150px;}

  The results are as follows:

  As expected, her sister was on a blue background.

  Vii. stacking context and stacking order

  This article has repeatedly mentioned that once a common element has a cascading context, its stacking order becomes higher. Where exactly is the stacking order?

  There are two kinds of situations to discuss here:

  1. If the cascading context element does not depend on z-index numeric values, its stacking order is z-index:auto considered to be a z:index:0 level;
  2. If the cascading context element relies on z-index numeric values, its stacking order is determined by the z-index value.

  As a matter of fact, the Cascade Order table we provide above actually lacks other important information. I also took the time to redraw a more complete 7 hierarchy sequence diagram (same copyright, commercial please buy, can get no watermark large image):

  Do you know why positioning elements are stacked on top of ordinary elements?

  The root cause is that once the element becomes a positioning element, it z-index will automatically take effect, at which point it z-index is the default, that is, the auto 0 level, according to the above cascading order table, will overwrite inline or block or float element.

  Instead of supporting the Z-index's cascading context element's natural z-index:auto level, it means that cascading context elements and positioning elements are stacked sequentially, so when they cascade, they follow the "catch up" rule.

  We can speed test under:

  
  

  Will find that the two styles are exactly the same, only in the DOM stream position is not the same, resulting in their cascading performance is not the same, the back of the sister lying on the front sister's body. This also shows that the stacking order of the cascading context elements is z-index:auto level.

  Z-index Values and stacking order
  If the element supports Z-index values, then the stacking order will be good to understand, compared to the size of the small pot friends will be, in essence, the application of the "who the big who on" the guidelines. In the past, we only had to care about the z-index of the positioning elements, but in the CSS3 era, Flex children also supported z-index , so we face the situation more complex than before. However, the good thing is that the rules are the same, for z-index the use and performance of the same, apply the above 7 hierarchy stack table is OK.

  Similarly, for a simple example, look at z-index:-1 and z-index:1 change the effect on the Cascade performance, the following two paragraphs of HTML:

  <div style= "Display:flex; Background:blue; " >   </div>

  <div style= "Display:flex; Background:blue; " >   </div>

  Finally, it will be found, z-index:-1 ran to the background color of the facet, and high above z-index:1 .

  An interesting display phenomenon related to cascading contexts
  In the actual project, we may gradually use the CSS3 Fadein fade-in animation effect enhancement experience, so we may encounter a similar phenomenon:

  You can click here: CSS3 Fadein fade-in animation animation interesting phenomenon

  There is an absolutely positioned black translucent layer overlaid on the picture, which is shown by default:
  

  However, once the picture starts to walk Fadein fade out of the CSS3 animation, the text runs to the back of the picture:
  

  Why is that?

  In fact, learning the contents of this article, it is very simple! Fadein Animation Essence is opacity the change of transparency:

  @keyframes FadeIn {  0% {     opacity:0;  }  100% {    opacity:1;  }}

  You know, opacity when the value is not 1 , there is a cascading context, stacking order is a z-index:auto level, with no z-index value of absolute absolute positioning elements are equal. and the text element in this demo is in front of the picture element, so, when the CSS3 animation is not the final moment opacity: 1 , the picture behind the Dom stream will follow the "catch up" rule, covering the text.

  That's why, so it's easy for us to solve the problem.

  1. Adjust the sequence of Dom flow;
  2. Improve the stacking order of text, for example, set z-index:1 ;

cascading contexts and stacking order in CSS