重新理解z-index

一，前言

今天遇到一个布局兼容问题，调试了一番，发现z-index的表现和自己的认知不相符，才知道自己对z-index的认知有错误，于是写篇文章总结下这个z-index的具体使用。有基础的朋友可以直接看第四节。

二，标准文档流

在了解z-index之前，需要先知道标准文档流。

标准文档流其实是浏览器渲染页面的一个规则：所有的页面元素，都要按照它在HTML文档中出现的先后顺序，依次在浏览器中，从左上角开始，从上到下，从左到右的顺序依次显示。

具体的表现为：

2.1，块级元素：

有以下的几个特征：

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

2.2，行内元素：

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

2.3，块级元素和行内元素可以相互转换：

 display:block
 display:inline

三，position

常见的使元素脱离文档流的手段有：浮动和定位。

之所以讲这个，是因为只有脱离了文档流，才有z-index来设置元素的层叠等级。

浮动好理解，定位主要是position的几个属性值：

通常情况下， position 有以下几个取值。具体如下：

取值	含义	说明
static	静态定位	对象遵循标准文档流，top，right，bottom，left 等属性失效。
relative	相对定位	对象遵循标准文档流中，依赖top，right，bottom，left 等属性相对于该对象在标准文档流中的位置进行偏移，同时可通过 z-index 定义层叠关系。
absolute	绝对定位	对象脱离标准文档流，使用 top，right，bottom，left 等属性进行绝对定位（相对于 static 定位以外的第一个父元素进行绝对定位），以及可通过 z-index 定义层叠关系。
fixed	固定定位	对象脱离标准文档流，使用 top，right，bottom，left 等属性进行绝对定位（相对于浏览器窗口进行绝对定位）同时可通过 z-index 定义层叠关系。
sticky	粘性定位	可以说是相对定位 relative 和固定定位 fixed 的结合。元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于 viewport 来计算元素的偏移量。

这些内容，网上很多文章都有，不再赘述，本文主要讲解z-index的规则，不忘初心。

四，z-index的层叠上下文理解

z-index应该这样理解：每一个层叠上下文就是一层楼，而该楼层的z-index就是楼梯。1楼层的楼梯值再大，也不可能比2层楼高。

于是我们首先要理解一个层叠上下文的生成条件：

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 。

后面几个比较少用暂且不谈，本文主要讲前几个。需要理清几个名词概念：

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

五，z-index的层叠等级

理解了层叠上下文还不够，因为每层层级上下文内还分为七个层叠等级。具体如下图：

请添加图片描述

如下代码，就能体现出这七层结构：

<!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>

实现的效果和七层结构如出一辙：

请添加图片描述

如上文第四节创建层叠上下文的知识可知，这里html默认会创建一个基础的层叠上下文。为了避免它的影响，我这里让box再创建一个层叠上下文（有定位且有z-index）。

于是这六个子元素和自身的background/border其实都在这个box的层叠上下文中，就得遵守同一层叠上下文的七层层叠等级规则。

六，层叠上下文层级和dom结构关系

首先需要明确的一点是层叠上下文层级和dom结构没有明确的映射关系。但层叠上下文层级又基于dom结构生成。

主要是因为层叠上下文支持嵌套，在一个层叠上下文中还可以创造新的层叠上下文。但当未创建新的层叠上下文时，不管dom结构是不是父子关系，都是在同一层叠上下文之间，用七层层叠等级规则执行判断。

这里将上文的代码修改为：

<!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>

实现的效果：

请添加图片描述

就像这里，box创建了一个新的层叠上下文，又因为它具备子元素first-item和second-item，所以这两个元素必然是在同一个层叠上下文（box创建的）中。

而second-item不再有子元素，不用继续考虑，接下来看first-item。

因为first-item并没有创建新的层叠上下文（虽然有定位，但z-index未设置），则它的子元素也和它一样在当前box创建的层叠上下文中。

也就是说，first-item和second-item，a-1以及a-2这四者是在同一个层级上下文中进行堆叠，即使a-1和a-2是first-item的子元素。

于是根据七层层叠规则得到：

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

这个和上图中结果一致。这就是为啥说：**dom结构和层叠上下文没有严格的映射关系。**并不是一层dom就生成一个层叠上下文。

另外，**层叠上下文层级又基于dom结构生成。**意思就是低层级的层叠上下文，无论内部元素的z-index多大，是无论如何无法盖在高层级别元素上方的。

<!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>

对应实现的效果和层叠上下文层级关系如下图，first-item的层级比second-item低，比box高，因此，first-item中的元素无论z-index设置多高，都无法超过second-item的内容。无论z-index设置多低，都无法低于box（草绿色），甚至无法低于创建该层叠上下文的背景色（该层叠上下文中层叠等级最低，下图黄色）。

请添加图片描述

七，判断元素层叠顺序的套路

理解了层叠上下文，层叠等级，层叠上下文层级三者的关系，就可以用这个来判断两元素的遮盖情况：

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

八，案例练习

8.1，多层dom结构，但实际是同一层级上下文的情况

<!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>

生成的效果如下图，因为first-item 并没有生成新的层叠上下文，所以first-item ，second-item，a-1，a-2,b-2这几个元素都是在同一个层叠上下文中，直接利用七个层叠等级规则判断就好：

请添加图片描述

8.2，多层dom结构，多个层叠上下文层级的情况

给上文的first-item增加一个样式：

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

效果变成：

请添加图片描述

这是因为first-item也创建一个层叠上下文，和second-item创建的并列，并且上下文层级低于second-item。于是即使b-2的z-index:100也无法高于second-item。

九，总结

对于z-index的使用规律，MDN实际上就简单一句话：”z-index越大则越上层，有爹则拼爹“。

实际上，则是：

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

其实很多人误解的一点就是以为dom结构和层叠上下文层级并没有严格的映射关系。a元素的n层孙元素，有可能和a是在同一个层叠上下文中的。