前言

之前看到一段 z-index、position 的一些代码，更改层级的，个人看着一脸懵，然后查找相关 z-index 和 position 等相关资料的时候，找到了 CSS层叠上下文、层叠等级、层叠顺序、z-index，里面写的非常好，个人也算是茅塞顿开、受益匪浅，

个人感觉其里面一些也没有完全串起来，因此也写上一篇文章，以自己的思路简单介绍一下层叠相关知识，感觉不好的也可以参考他们的文章，看着更生动

参考文章：

CSS层叠上下文、层叠等级、层叠顺序、z-index

深入理解CSS中的层叠上下文和层叠顺序

ps：当你需要用到 z-index 的时候，基本上就需要了解层叠相关知识了，平时应对策略多了，实际上也不一定能感觉到哈，多一个知识点，碰到问题，就是一种解决方案，除了知识的深度，知识的广度也决定着我们的实力(深度上很多东西也是互通的，且也需要一定知识广度才能做到哈)

这边会根据自己的理解方式来进行讲解，有些顺序上甚至会有些不一样

层叠

层叠的意思很简单，就是我们盖房子一样，一块砖一块砖往上盖，很多砖(dom元素)层叠起来，盖成楼、小区等(页面)，盖的东西多了，层叠关系也就复杂了

用户(开发者)就像开启上帝俯视视角，查看一个小区、楼一样，不同楼层、小区的层叠关系影响着上帝能看到的情况，楼顶是会被最先看到的，因此，无论是一层还是多层，了解他们的层级关系，才能更好了解上帝(用户)视角

稍复杂的的可以参考别墅、城堡，也许会更有体会

下面通过 层叠顺序、层叠上下文、层叠等级 依次来介绍

z-index

z-index 为纵坐标方向上的值，需要注意的是，其只会在flex、定位布局中(absolute、position、fixed) 中生效

层叠顺序

为什么先介绍层叠顺序，个人认为他是一种规则，先入为主，后面介绍其他的时候也更容易带入理解，也能更好的体会与想象 层叠上下文、层叠等级 带来的效果

层叠顺序应用于同一个层叠上下文，反之不应用，因此 层叠顺序也可以理解为同一个层叠上下文的层叠顺序

ps：实际上在使用中，可以充分利用层叠上下文相关内容(例如：flex)，避免出现用到层叠顺序的情况，工作量也不高，还能避免记录这些顺序

层叠上下文

层叠上下文(stacking context)跟块级格式上下文(BFC)类似，可以抽象理解为其内部形成一个独立的整体，以整体上下文为参考，排序自然是这个整体优先级越高，其也会在最上面

如何产生层叠上下文

HTML中的根元素本身就具有层叠上下文，称为“根层叠上下文”。普通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。CSS3中的新属性也可以产生层叠上下文。层叠等级

层叠等级(stacking level)也有层叠水平的意思，我们均在同一个层叠上下文中探讨，否则就像一个在天上，一个在地上比较高度，没必要了(不考虑极端)

z-index与层叠等级

通过设置 flex、定位元素的 z-index 可以提高元素的优先级，同时先后顺序也决定着优先级，我们可以这样理解一个元素的层叠等级(优先级)

也可以看出 z-index 也是在一些场景下才会存在的，否则，就老老实实的看先后顺序

假设 z-index 的最大值是 999 (一般不会超过1000)，会有以下公式逻辑（实际上就是z-index 为第一优先级排序，先后顺序为第二优先级）

元素层叠等级(优先级) = zindex * 1000 + 先后顺序 * 1

注： 先后顺序 < 1000，此公式中 zindex 不符合生效条件时 或者为 auto 时，当做 0 处理，实际 auto 不完全等于 0 哈)

此时大概理解理解层叠等级的的情况了

层叠顺序、层叠上下文、层叠等级

同一个层叠上下文以层叠顺序为基础，不同的层叠上下文需要向根部追溯到同级，并遵循层叠等级进行排序

层叠顺序、层叠上下文、层叠等级对比案例理解

前面介绍了层叠顺序、层叠上下文、层叠等级，悟性高的人，相信已经不用使用案例了，下面使用简单的案例来梳理他们之间的关系

同一上下文层叠顺序案例

同一个上下文的的层叠顺序是固定的，例如：背景之间会受到层叠优先级影响、文字之间也会相互影响，但不推荐文字之间相互重叠

class="box">
    <div class="parent">
      parent
    div>
    <div class="parent2" style="margin-top: -100px;">
      parent2
    div>

.box {
    //给父节点设置层叠上下文没什么区别，只是从 html 变成了 box
    //position: relative;
    //z-index: 1;
}
.parent {
  width: 200px;
  height: 100px;
  background: #168bf5;
  font-size: 18px;
}
.parent2 {
  width: 200px;
  height: 100px;
  background: red;
  font-size: 14px;
}

改动子节点z-index

通过设置 z-index 设置层叠优先级(同时也设置成了层叠上下文，没有受到同级层叠顺序影响，因此没有出现文字重合问题)，z-index 大的跑到最外面显示了

//父节点设置了 flex 后就不用设置 relative 了，子节点会同时支持 z-index
.parent {
   ...
   position: relative;
   z-index: 2;
}
.parent2 {
   ...
   position: relative;
   z-index: 1;
}

不同的重叠上下文案例

还是上面的例子，只不过给 父节点设置 position + z-index 或 flex，box 即变成 层叠上下文元素，再给子元素设置 position + z-index 或 z-index 即可让子节点形成层级上下文

与上面不同的是，我们再分别给子节点分别加上 child，先来一个不带子层叠上下文的，仅仅改变子节点 z-index

class="box">
    <div class="parent">
        parent
        <div class="child">childdiv>
    div>
    <div class="parent2" style="margin-top: -100px;">
        parent2

        <div class="child2">child2div>
    div>

.box {
  position: relative;
  z-index: 1;
}
.parent {
  width: 200px;
  height: 100px;
  background: #168bf5;
  font-size: 18px;
}
.parent2 {
  width: 200px;
  height: 100px;
  background: red;
  font-size: 14px;
}
.child {
  width: 100px;
  height: 200px;
  background: #32d19c;
  position: relative;
  z-index: 1;
}
.child2 {
  width: 100px;
  height: 200px;
  background: gray;
  position: relative;
  z-index: 1;
}

比起上一个例子，我们加上了 child，父节点不是层级上下文，其同时被层叠顺序、层叠上下文、层叠等级影响到，显示略微复杂，显示如下所示

我估计没给偏移重合，增加点难度，细心人可以猜到，其实际显示顺序分别为 box、parent-bkg、parent2-bkg、parent、parent-content、parent2-content、child、child2

为什么 parent、parent 分成了背景和内容，因为他们在同一个 层叠上下文中，同时受到了层叠顺序 + 层叠等级影响，只不过层叠等级只有先后顺序影响到罢了

child、child2 已经分别形成独立的层叠上下文，因此他们不会受到父节点的层叠顺序影响，由于index一致他们也是分别以层叠等级的先后顺序排序的，固child2在最上面

改动parent的为层叠上下文，同时修改子节点层z-index

我们按照上面改动 parent 和 子节点的 z-index，同时使用一下 flex + z-index，同时调整了一点间距，css如下

.box {
  display: flex;
}
.parent {
  width: 200px;
  height: 100px;
  background: #168bf5;
  font-size: 18px;
  z-index: 1;
}
.parent2 {
  width: 200px;
  height: 100px;
  background: red;
  font-size: 14px;
  z-index: 1;
}
.child1 {
  width: 100px;
  height: 200px;
  background: #32d19c;
  position: relative;
  font-size: 18px;
  z-index: 2;
}
.child2 {
  width: 100px;
  height: 200px;
  background: gray;
  position: relative;
  font-size: 14px;
  z-index: 1;
}

结果长这样，是不是跟想象一致

其顺序分别为 box、parent、child、parent2、child2

这个看着也简单很多，毕竟都是层级上下文，没有受到层叠顺序的影响，因此看着比较独立，唯一可能有疑问的就是 child 的 z-index 为 2，最大，却没有在最上面

很显然，前面提到了层叠上下文其内部看错一个整体，比较自然先比较这个整体的先后顺序，整体的内部才会在细分，因此 parent 和 parent2 同为独立层叠上下文，parent2的层叠等级高，其内部元素也随之水涨船高，因此其最靠近用户，反之 parent整体在 parent2 下面，child2 也是一样，只不过唯一区别是，此时子节点比父节点更靠近用户一些

最后

了解好了 层叠顺序、CSS层叠上下文、层叠等级(z-index) 就先介绍到这里了，其逻辑也并不是很复杂，只是内容看着多了，也许合适的场景，有些人只需要几句话就说明白了，简单了有些人看不懂，复杂了有些人嫌烦，这也是没办法的事情

ps：这也是给个人总结温习的文章