CSS Basics: Cascading Order and Cascading Context

Introduction

　　Taking into account that two elements may overlap, the stacking order determines which element is in the front and which element is in the back, which is for ordinary elements. The stacking context is basically the same as the block-level formatting context (BFC), which is basically created by some CSS properties. It is used as a system alone, that is to say, the stacking order of the content is based on the stacking order of the container. Regardless of the stacking order of external elements, the creation of stacking contexts can be divided into the following three categories:

(1) The root element of the page is born with a stacking context, which is called the root stacking context

(2) The positioning element whose "z-index" is a value has its own stacking context. The larger the value, the higher the stacking order.

(3) Some CSS3 properties also have their own stacking context

 

stacking order of elements

　　as the picture shows:

(1) Elements with larger stacking order will cover smaller elements

(2) When the stacking order is the same, the later elements in the DOM flow will cover the earlier elements

(3) "background/border" refers specifically to the background and border of the stacking context element. If an element is a normal element, no separate stacking context is created, and its children have a negative "z-index", then this child It will be hidden behind the background, which reflects that the stacking order of the content is based on the stacking order of the stacking context in which it is located.

Example 1:

<!-- html -->
<div class="box">
  <div class="order1"></div>
</div>

//css
.box {
  width: 200px;height: 200px;
  background: lightblue;
}
.order1 {
  width: 150px;height: 150px;
  background: red;
  position: relative;
  z-index: -1;
}

operation result:

Example 2:

//css
.box {
  width: 200px;height: 200px;
  background: lightblue;
  position: relative;
  z-index: 1;
}
.order1 {
  width: 150px;height: 150px;
  background: red;
  position: relative;
  z-index: -1;
}

operation result:

(4) "z-index:auto" and "z-index:0" have the same stacking order, that is, follow the principle of "later come first" in rule (2), but their difference is that the latter creates a separate the stacking context.

Example 1:

<!-- html -->
<div class="box">
  <div class="order1"><div class="child1"></div></div>
  <div class="order2"><div class="child2"></div></div>
</div>

//css
.box {
  height: 300px;
  position: relative;
  z-index: 1;
}
.order1 {
  width: 250px;height: 250px;
  background: red;
  position: absolute;
  z-index: auto;
}
.order1 .child1 {
  width: 50px;height: 50px;
  background: yellow;
  position: relative;
  z-index: 2;
}
.order2 {
  width: 200px;height: 200px;
  background: green;
  position: absolute;
  z-index: auto;
}
.order2 .child2 {
  width: 100px;height: 100px;
  background: blue;
  position: relative;
  z-index: 1;
}

operation result:

Due to the "z-index:auto" of "order1" and "order2", although the latter overrides the former, no new stacking context is created, so the stacking order of their descendants is actually relative to the same "root stacking context" ", so elements with larger "z-index" values ​​come first.

Example 2:

　　set "order1" and "order2" to "z-index:0"

operation result:

In the same way, the latter overrides the former, and "z-index:0" creates a new stacking context, the descendant stacking order is determined relative to the parent container, and "order1" has been overridden by "order2", its descendants No matter how high the "z-index" is set, it has no effect on the stacking order outside the parent container.

(5) The "z-index" attribute of the positioning element takes effect by default, and the value is "auto", which is why the stacking order of the positioning element is higher than that of the block-level, floating and inline elements

( 6 ) Some new properties in CSS3 will create a new stacking context, the stacking order is the same as "z-index:auto", for example: "flex" layout elements, "opacity" is not 1 elements, "transform" is not 1 element of...