在项目中，同学们有没有和我一样有这样的疑问：

为什么我设置的z-index不起作用？
子元素如何才能覆盖父元素？
为什么设置了z-index大的元素却覆盖不了z-index小的元素？

下面让我们从底层原理逐一解除疑惑。

1、什么是CSS层叠上下文？

层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间

看到一个很好的比喻，这里引用一下；

可以想象一张桌子，上面有一堆物品，这张桌子就代表着一个层叠上下文。想象在桌子上有四个小方块，在这四个小方块之上有一片玻璃，而在玻璃片上有一盘水果。这些方块、玻璃片、水果盘，各自都代表着层叠上下文中一个不同的层叠层，而这个层叠上下文就是桌子。

在网页中都有一个默认的层叠上下文，这个层叠上下文（桌子）的根源就是 <html></html>。 html标签中的一切都被置于这个默认的层叠上下文的一个层叠层上（物品放在桌子上）。

当你给一个定位元素赋予了除 auto 外的 z-index 值时，你就创建了一个新的层叠上下文，其中有着独立于页面上其他层叠上下文和层叠层的层叠层，这就相当于把另一张桌子带到了房间里。

总结一下：

层叠上下文是HTML元素的三维概念，可以想象为一条垂直于视窗的z轴
当元素创建了重叠上下文时，这个元素就有了一个z轴
如果内部的子元素发生重叠，会依据自身属性优先级顺序占用z轴（重叠上下文）上的空间
优先级最大的元素排在最上面，离用户也最近

2、如何产生层叠上下文？

一般来讲有3种方法：

html中的根元素<html></html>本身就是层叠上下文，称为根层叠上下文
position属性为非static值并设置z-index属性为具体数值
一些CSS3属性也能产生层叠上下文
1. 一个 flex 元素且其z-index 值不为 auto，也就是父元素 display: flex|inline-flex
2. 元素的 opacity 属性值小于 1
3. 元素的 transform 属性值不为 none
4. 元素的 mix-blend-mode 属性值不为 normal
5. 元素的 isolation 属性被设置为 isolate
6. 在 mobile WebKit 和 Chrome 22+ 内核的浏览器中，position: fixed 总是创建一个新的层叠上下文, 即使 z-index 的值是 “auto”
7. 在 will-change 中指定了任意 CSS 属性，即便你没有定义该元素的这些属性
8. 元素的 -webkit-overflow-scrolling 属性被设置 touch

3、层叠等级与层叠顺序

层叠等级

“层叠等级”(层叠水平, Stacking Level) 决定了同一个层叠上下文中元素在z轴上的显示顺序；

普通元素的层叠等级优先由其所在的层叠上下文决定
层叠等级的比较只有在同一个层叠上下文元素中才有意义
在同一个层叠上下文中，层叠等级描述定义的是该层叠上下文中的元素在Z轴上的上下顺序

层叠顺序

“层叠顺序”英文称作”stacking order”. 表示元素发生层叠时候有着特定的垂直显示顺序，注意，这里跟上面两个不一样，上面的层叠上下文和层叠水平是概念，而这里的层叠顺序是规则。

下面来看一张7阶层叠水平图。

具体解释为：

形成堆叠上下文环境的元素的背景与边框
拥有 z-index<0 的子堆叠上下文元素（负的越高越堆叠层级越低）
正常流式布局，非 inline-block，无 position 定位（static除外）的子元素
无 position 定位（static除外）的 float 浮动元素
正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）
拥有 z-index=0 的子堆叠上下文元素
拥有 z-index>0 的子堆叠上下文元素（正的越低越堆叠层级越低）

看到这张图，相信大家会有疑问：

行内元素的层叠顺序为什么要高于块级元素与浮动元素？

这个理解起来其实很简单，像border/background属于装饰元素的属性、浮动和块级元素一般用来页面布局，而内联元素一般都是文字内容，并且网页设计之初最重要的就是文字内容，所以在发生层叠时会优先显示文字内容，保证其不被覆盖。

来代码看一下事实是否是这样的：

<div class="box1">1定位z-index<0</div>
<div class="box2">2块级元素</div>
<div class="box3">3浮动</div>
<div class="box4">4行内元素</div>
<div class="box5">5定位z-index=0</div>
<div class="box6">6定位z-index>0</div>

div {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
}
.box1{
  position: relative;
  z-index: -1;
  background: antiquewhite;
}
.box2{
  margin-left: 50px;
  margin-top: -50px;
  background: aqua;
}
.box3{
  float: left;
  margin-left: 100px;
  margin-top: -50px;
  background: lightblue;
}
.box4{
  display: inline-block;
  background: lightcoral;
  margin-left: -50px;
}
.box5{
  background: lightgreen;
  position: relative;
  left:200px;
  top: -50px;
  z-index: 10;
}
.box6{
  background: lightsalmon;
  position: relative;
  left: 250px;
  top: -100px;
  z-index: 10;
}

层叠等级并不一定由 z-index 决定，只有定位元素的层叠等级才由 z-index 决定，详见下文。其他类型元素的层叠等级由层叠顺序、他们在HTML中出现的顺序、他们的父级以上元素的层叠等级一同决定。

记住一个准则：

谁大谁上：定位元素的层级等级由z-index决定，z-index大的覆盖z-index小的。
后者居上：当元素的层叠等级一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

4、z-index

在 CSS 2.1 中, 所有的盒模型元素都处于三维坐标系中。除了我们常用的横坐标和纵坐标，盒模型元素还可以沿着"z 轴"层叠摆放，当他们相互覆盖时， z轴顺序就变得十分重要。

z-index属性是用来设置元素的堆叠顺序，它可以被设置为正整数、负整数、0、auto，如果一个定位元素没有设置 z-index，那么默认为auto；此时不产生层叠上下文，当z-index设置了数值，此时就产生了一个层叠上下文。z-index的值越大，元素的层级越高，层级高的元素会覆盖在层级低的元素的上面。

使用z-index需要注意：

z-index 只适用于定位（position 属性且值不为 static 时）或flex元素，对其他元素无效，
当父元素设置了z-index属性时，子元素的z-index属性只与同级元素和父级元素作比较时才有意义，与其他元素对比时无意义。此时子元素与父元素外的所有的外部元素进行堆叠层级顺序对比时，都以父元素的z-index属性值为准进行对比，子元素本身的z-index属性值无效。所以如果你遇到 z-index 值设了很大，但是不起作用的话，就去看看它的父级层叠上下文是否被其他层叠上下文盖住了。
当父元素未设置了z-index属性，子元素的z-index属性与父元素外的所有的外部元素进行堆叠层级顺序对比时，都以元素本身的z-index属性值为准进行对比。

5、实践一下

1、兄弟元素。box1 设置 z-index=0 与 box2未设置z-index

解析：当没有指定z-index的时候，所有元素都在会被渲染在默认层(0层)，所以设置了z-index的元素与未设置z-index的元素层级相同，遵循后面的元素覆盖前面元素的原则。但他们是有本质的区别，z-index设置了数值即产生了层叠上下文，z-index不设置，则不产生层叠上下文。

2、父子元素，父元素未设置z-index，子元素设置了z-index属性

解析：子元素z-index大于等于0时，子元素层级高于父元素层级；当子元素z-index<0时，子元素层级低于父元素层级

3、父子元素，父元素设置了z-index，子元素未设置z-index,或设置z-index

解析：这种情况下，无论父元素z-index设置的多大，无论子元素z-index层级怎么设置，子元素层级永远高于父元素

4、父元素未设置z-index，子元素z-index与父元素同级元素z-index值进行对比

解析：跟父元素的同级元素进行对比，且父元素未设置z-index，所以是以子元素的z-index属性值为准与父元素的同级元素进行对比，遵循z-index属性值大的元素，层级高规则，以及层级相同时，后面元素覆盖前面元素的规则。

5、父元素设置z-index，子元素z-index与父元素同级元素z-index值进行对比

解析：父元素的同级元素进行对比，且父元素设置了z-index，所以是以父元素的z-index属性值为准与父元素的同级元素进行对比，同样遵循z-index属性值大的元素，层级高规则，以及层级相同时，后面元素覆盖前面元素的规则。

6、父元素均未设置`z-index`属性，子元素A`z-index`属性值与父元素的同级元素的子元素B`z-index`属性值进行对比

解析：首先将每个子元素与其父元素进行比较，box1-son1大于0，所以box1-son1在box1上面，box2-son1大于0，所以box2-son1在box2上面，争夺季军：再比较box1与box2，由于都未设置z-index，box2位于文档流下面，所以box2在box1上面。争夺亚军：再比较box2与box1-son1，只要box1-son1大于0，都位于box2的上面。争夺冠军：再比较box1-son1与box2-son1，遵循z-index谁大谁在上的原则。

7、父元素均设置`z-index`属性，子元素A`z-index`属性值与父元素的同级元素的子元素B`z-index`属性值进行对比

解析：父元素都设置了z-index，则其子元素无论如何设置，都比父元素层级高，所以各自的子元素一定在各自的父元素上面，此时，可视父子元素为不可分割的一个整体。再比较两个父元素z-index，遵循同样的原则。

8、父元素A未设置`z-index`属性，父元素B设置了`z-index`属性，子元素A`z-index`属性值与父元素的同级元素的子元素B`z-index`属性值进行对比

解析：先比较父子元素：记住一个准则，只要父元素设置了z-index，其子元素无论怎么设置，都在其上面，此时可以认为它们是不可分割的整体，所以box2-son1一定在box2上面，再看box1与box1-son1，只要box1-son1不为负值，都在box1上面第一步已经得出最下面是box1，再比较box1-son1与box2，遵循谁大谁上，以及后来居上的准则，得出box2位于box1-son1的上面

6、解惑

1、为什么我写的z-index没有生效？

因为它单独使用时不生效，一定要配合定位属性一起，即指定了position属性不是默认的static，其他的absolute、relative、fixed都可以使z-index生效。(在CSS3之后，弹性元素的子元素也可以生效)

2、为什么z-index大的元素却没有盖住z-index小的元素？

看下这个栗子：

父元素的z-index为auto：

父元素的z-index为0：

可以看到，两种情况的表现截然相反。上面我们讲过了，这里再回顾一下，已经了解的略过。

当z-index为auto时，是一个普通元素，两个box-son层比较不受父级的影响，按照规则谁大谁上，所以box1-son1会覆盖box2-son2。当z-index为0时，会创建一个层叠上下文，此时的层叠规则就发生了变化。每个层叠上下文都是独立的。两个box的层叠顺序比较变成了优先比较其父级层叠上下文元素的层叠顺序。由于两者z-index都是0，所以，遵循层叠规则后来居上，根据在DOM出现的先后顺序决定谁在上面，于是，位于后面的box2覆盖box1。此时box-son元素上的z-index是没有任何意义的。

3、如何让父元素盖住子元素？

这里很多人是不是认为直接让父元素的z-index大于子元素的z-index不就好了，可事实真是如此吗？根据我们上面多次的实践，可以看到这样做是行不通的。父元素设置了z-index为数值，所以它产生了一个层叠上下文，此时子元素无论怎么设置z-index都不可能在父元素的下方。唯一可以实现的方法是将子元素的z-index设为负值，而父元素只要不产生层叠上下文就可以了。

为什么我写的z-index无效？