Re-understand z-index

I. Introduction

Today, I encountered a layout compatibility problem. After some debugging, I found that the performance of z-index did not match my cognition, so I realized that my cognition of z-index was wrong, so I wrote an article to summarize this z-index specific use. Those who have the foundation can directly watch the fourth quarter.

Second, the standard document flow

Before understanding z-index, you need to know the standard document flow.

The standard document flow is actually a rule for browsers to render pages: all page elements must be displayed in the browser in the order in which they appear in the HTML document, starting from the upper left corner, from top to bottom, and from left to left Displayed in order from the right.

The specific performance is:

2.1, block-level elements:

There are several characteristics as follows:

 1.单独的占一行
 2.可以设置宽、高
 3.如果不设置宽度，他将默认占满父盒子的宽度

2.2, Inline elements:

 1.与其他元素自动的并排在一行上
 2.不能设置它的宽和高，它的宽和高就是内容的宽和高

2.3, block-level elements and inline elements can be converted to each other:

 display:block
 display:inline

Three, position

Common means of keeping elements out of document flow are: floating and positioning.

The reason for this is because only when the document flow is separated, can the z-index be used to set the cascading level of the element.

Floating is easy to understand. Positioning is mainly a few attribute values ​​​​of position:

Usually, positionthere are the following values. details as follows:

value	meaning	illustrate
static	static positioning	The object follows the standard document flow, top , right , bottom , left and other properties are invalid.
relative	relative positioning	The object follows the standard document flow, relying on top , right , bottom , left and other attributes to offset relative to the position of the object in the standard document flow, and the layering relationship can be defined through z-index .
absolute	absolute positioning	The object breaks away from the standard document flow, uses top , right , bottom , left and other properties for absolute positioning (absolute positioning relative to the first parent element other than static positioning), and can define a cascading relationship through z-index .
fixed	fixed positioning	Objects deviate from the standard document flow, use top , right , bottom , left and other properties for absolute positioning (absolute positioning relative to the browser window) and can define the cascading relationship through z-index .
sticky	sticky positioning	It can be said that it is a combination of relative positioning relative and fixed positioning fixed . The fixed relative offset of an element is relative to its nearest ancestor element with a scroll box . If none of the ancestor elements can be scrolled, the offset of the element is calculated relative to the viewport .

These contents are found in many articles on the Internet, so I won’t go into details. This article mainly explains the rules of z-index, not forgetting the original intention.

Fourth, the stacking context understanding of z-index

The z-index should be understood in this way: each stacking context is a floor, and the z-index of the floor is the stairs. No matter how great the value of the stairs on the 1st floor is, it is impossible to be higher than the 2nd floor.

So we first need to understand the generation conditions of a cascading context:

1，根元素html ；
2，绝对定位 absolute 或相对定位 relative 且 z-index 值不为 auto ；
3，一个 flex 项目，且 z-index 值不为 auto ，也就是父元素 display: flex|inline-flex ；
4，元素的 opacity 属性值小于 1 ；
5，元素的 transform 属性值不为 none ；
6，元素的 mix-blend-mode 属性值不为 normal ；
7，元素的 isolation 属性被设置为 isolate ；
8，在 mobile WebKit 和 Chrome 22+ 内核的浏览器中，position: fixed 时总是会创建一个新的层叠上下文, 即使 z-index 的值是 auto ；
元素的 -webkit-overflow-scrolling 属性被设置 touch 。

Leaving aside the latter ones which are rarely used, this article mainly talks about the first ones. Need to sort out a few noun concepts:

层叠上下文：对应本节中所说：生成的一个层叠上下文（一个楼层）
层叠等级：一个层叠上下文中的元素层叠规则：七层层叠规则
层叠上下文层级;每个层叠上下文之间是有级别的，低级别的无论z-index多大都无法突破高级别的层叠上下文。各个层叠上下文之间，用层级来描述（有的文章还是用层叠等级，这样容易混乱，所以我换种说法）

Five, the cascading level of z-index

It is not enough to understand the cascading context, because there are seven cascading levels in each hierarchical context. The details are as follows:

The following code can reflect the seven-layer structure:

<!DOCTYPE html>
<html lang="en">
<body>
  <style>
    body{
      
      
      height: 100vh;
      background: pink;
    }
    /* 新创建一个层叠上下文 */
    .box{
      
      
      height: 350px;
      background: greenyellow;
      position: relative;
      z-index:1;
    }
    .total{
      
      
      height: 100px;
      width: 300px;
      text-align: center;
      position: absolute;
    }
    .first-item{
      
      
      background: yellow;
      top: 10px;
      left:10px;
      z-index: -1;
    }
    .second-item{
      
      
      background: blueviolet;
      display: block;
      top: 40px;
      left:40px;
    }
    .third-item{
      
      
      background: red;
      float: left;
      top: 70px;
      left:70px;
    }
    .fourth-item{
      
      
      background: blue;
      display: inline;
      top: 100px;
      left:100px;
    }
    .five-item{
      
      
      background: rgb(18, 248, 217);
      top: 130px;
      left:130px;
      z-index: auto;
    }
    .six-item{
      
      
      background: rgb(248, 83, 18);
      top: 160px;
      left:160px;
      z-index: 1;
    }
  </style>
  <div class="box">
    <div class="first-item total">z-index小于0 </div>
    <div class="second-item total">block块级盒子</div>
    <div class="third-item total">float浮动盒子</div>
    <div class="fourth-item total">inline/inline-block水平盒子</div>
    <div class="five-item total">z-index:auto或0或不设置</div>
    <div class="six-item total">z-index大于0</div>
  </div>
</body>
</html>

The achieved effect is exactly the same as the seven-layer structure:

As you can see from the knowledge of creating a stacking context in the fourth section above, here HTML will create a basic stacking context by default. In order to avoid its influence, I let the box create another stacking context (with positioning and z-index).

Therefore, these six sub-elements and their own background/border are actually in the stacking context of this box, and must abide by the seven-layer stacking level rules of the same stacking context.

Six, cascading context hierarchy and dom structure relationship

The first thing to be clear is that there is no clear mapping relationship between the cascading context level and the dom structure. But the cascading context level is generated based on the dom structure.

The main reason is that stacking contexts support nesting, and new stacking contexts can also be created in a stacking context. But when no new cascading context is created, regardless of whether the dom structure is a parent-child relationship, it is judged by the seven-layer cascading level rule between the same cascading contexts.

Here the above code is modified to:

<!DOCTYPE html>
<html lang="en">
<body>
  <style>
    body{
      
      
      height: 100vh;
      background: pink;
    }
    /* 新创建一个层叠上下文 */
    .box{
      
      
      height: 350px;
      background: greenyellow;
      position: relative;
      z-index:1;
    }
    .total{
      
      
      height: 100px;
      width: 300px;
      text-align: center;
      position: absolute;
    }
    .first-item{
      
      
      background: yellow;
      top: 10px;
      left:10px;
    }
    .second-item{
      
      
      background: blueviolet;
      display: block;
      top: 50px;
      left:40px;
      z-index: 1;
    }
    .a-1{
      
      
      background: red;
      height: 20px;
      position:absolute;
      left: 200px;
      top:30px;
      z-index: 5;
    }
    .a-2{
      
      
      background: rgb(229, 20, 236);
      height: 20px;
      position: absolute;
      z-index: -1;
      right: -20px;
      top: 27px;
    }

  </style>
  <div class="box">
    <div class="first-item total">
      <div class="a-1">a-1</div>
      <div class="a-2">a-2</div>
    </div>
    <div class="second-item total"></div>
  </div>
</body>
</html>

Achieved effect:

Just like here, box creates a new stacking context, and because it has sub-elements first-item and second-item, these two elements must be in the same stacking context (created by box).

And second-item no longer has sub-elements, don't need to continue to think about it, let's look at first-item next.

Because first-item does not create a new stacking context (although there is positioning, but z-index is not set), its child elements are also in the stacking context created by the current box like it .

That is to say, first-item and second-item, a-1 and a-2 are stacked in the same hierarchical context, even though a-1 and a-2 are child elements of first-item.

Then according to the seven-layer cascading rule:

box：创建该层叠上下文，它的background在最下面（草绿色）
first-item：block块级盒子（黄色）
second-item：z-index=1（紫色）
a-1:z-index=5（红色）
a-2:z-index=-1(粉色)

This is consistent with the result in the figure above. This is why it is said: there is no strict mapping relationship between the **dom structure and the cascading context. **It is not a layer of dom that generates a stacking context.

In addition, the **cascading context level is generated based on the dom structure. **It means that the low-level stacking context, no matter how big the z-index of the internal elements is, cannot cover the high-level elements anyway.

<!DOCTYPE html>
<html lang="en">
<body>
  <style>
    body{
      
      
      height: 100vh;
      background: pink;
    }
    /* 新创建一个层叠上下文 */
    .box{
      
      
      height: 350px;
      background: greenyellow;
      position: relative;
      z-index:1;
    }
    .total{
      
      
      height: 100px;
      width: 300px;
      text-align: center;
      position: absolute;
    }
    .first-item{
      
      
      background: yellow;
      top: 10px;
      left:10px;
      z-index: 1;
    }
    .second-item{
      
      
      background: blueviolet;
      display: block;
      top: 50px;
      left:40px;
      z-index: 2;
    }
    .a-1{
      
      
      background: red;
      height: 20px;
      position:absolute;
      left: 200px;
      top:30px;
      z-index: 5;
    }
    .a-2{
      
      
      background: rgb(229, 20, 236);
      height: 20px;
      position: absolute;
      z-index: -100;
      right: -20px;
      top: 27px;
    }
  </style>
  <div class="box">
    <div class="first-item total">
      <div class="a-1 total">a-1</div>
      <div class="a-2 total">a-2</div>
    </div>
    <div class="second-item total"></div>
  </div>
</body>
</html>

The corresponding implementation effect and the hierarchical relationship of the stacking context are as shown in the figure below. The level of first-item is lower than that of second-item and higher than that of box. Therefore, no matter how high the z-index of the elements in first-item is, it cannot exceed that of second-item. content. No matter how low the z-index setting is, it cannot be lower than the box (grass green), or even lower than the background color of the stacking context (the lowest stacking level in this stacking context, yellow in the picture below).

Seven, the routine for judging the stacking order of elements

After understanding the relationship between stacking context, stacking level, and stacking context level, you can use this to judge the coverage of two elements:

1，看两个元素所在的层叠上下文层级。高层元素必然遮盖低层元素。
2，若在同一层叠上下文层级，也就是在同一个层叠上下文中，就需要看七层层叠等级。谁高谁在上面
3，如果都一样，后写的盖住之前写的。

Eight, case exercises

8.1, multi-layer dom structure, but actually the same level of context

<!DOCTYPE html>
<html lang="en">
<body>
  <style>
    body{
      
      
      height: 100vh;
      background: pink;
    }
    /* 新创建一个层叠上下文 */
    .box{
      
      
      height: 350px;
      background: greenyellow;
      position: relative;
      z-index:1;
    }
    .total{
      
      
      height: 100px;
      width: 300px;
      position: absolute;
    }
    .first-item{
      
      
      background: yellow;
      top: 10px;
      left:10px;
    }
    .a-1{
      
      
      width: 300px;
      height: 100px;
      background: green;
      float: left;
      top: 10px;
      left: 10px;
      position: absolute;
    }
    .b-2{
      
      
      width: 300px;
      height: 100px;
      background: blue;
      position: absolute;
      top: 40px;
      left: 20px;
      z-index: 100;
    }
    .second-item{
      
      
      background: orange;
      display: block;
      top: 30px;
      left:50px;
      z-index: 2;
    }
  </style>
  <div class="box">
    <div class="first-item total">
      <div class="a-1">float绿色</div>
      <div class="a-2">
        <div class="b-2">100蓝色</div>
      </div>
    </div>
    <div class="second-item total">2橙色</div>
  </div>
</body>
</html>

The generated effect is as shown in the figure below, because first-item does not generate a new stacking context, so first-item, second-item, a-1, a-2, b-2 are all in the same stacking context , just use the seven cascading level rules to judge directly:

8.2, multi-layer dom structure, multiple cascading context levels

Add a style to the first-item above:

.first-item{
    
    
    z-index: 1;
}

The effect becomes:

This is because first-item also creates a cascading context, parallel to that created by second-item, and the context level is lower than second-item. So even b-2's z-index: 100 cannot be higher than second-item.

Nine, summary

Regarding the usage rules of z-index, MDN actually has a simple sentence: "The larger the z-index, the higher the level, and the father will fight for father".

In fact, it is:

1，同一个层叠上下文中,z-index越大则越上层。
2，不同层级上下文，则层级越高越上层。
3，层级等级和层叠等级相同的，则后来的覆盖之前的。

In fact, what many people misunderstand is that there is no strict mapping relationship between the dom structure and the cascading context level. The n-layer grandchildren of a element may be in the same stacking context as a.