在 10.定位 提到过一个 z-index 的属性，这个属性在定位中，可以改变元素的前后关系，即在多个定位元素中，z-index 属性越大的元素，离用户就越近，就会遮住后面的元素。

但实际上 z-index 属性并不简单，本节就可以作为补充。

堆叠上下文有一点像 BFC，也是一块区域，也是由某个元素创建。它规定了该区域中的内容在 z 轴上排列的先后顺序。也就是这个区域的内容在层次上的顺序，谁在上谁在下。

首先，堆叠上下文是由一些元素创建的，创建堆叠上下文的元素如下：

• html 元素（根元素）
• z-index 属性不为 auto 的定位元素。

以上元素创建了堆叠上下文，那么其内部的排列规则就按照这个堆叠上下文来排列。每一个堆叠上下文都必须看成一个整体，不可分割。

以上元素会创建堆叠上下文，接下来就是，在同一个堆叠上下文中的元素，应该按照什么规则在 Z 轴上排列。

一共有七条规则，堆叠上下文内部的元素会按照以下顺序进行排列（从后到前）：

1. 创建堆叠上下文的元素的背景和边框
2. 堆叠级别（z-index）为负值的堆叠上下文
3. 常规流非定位的块盒
4. 非定位的浮动盒子
5. 常规流非定位行盒
6. 任何 z-index 是 auto 的定位子元素，以及 z-index 是 0 的堆叠上下文
7. 堆叠级别为正值的堆叠上下文

如果多个元素属于同一个情况，或者说 z-index 属性相同，那么后写的元素会覆盖前面的元素。