CSS中的层叠上下文

HTML 文档中的三维概念

平时我们从设备终端看到的 HTML 文档都是一个平面的，事实上 HTML 文档中的元素却是存在于三个维度中。除了大家熟悉的平面画布中的 x 轴和 y 轴，还有控制第三维度的 z 轴。

其中 x 轴通常用来表示水平位置，y 轴来表示垂直位置，z 轴表示屏幕内外方向上的位置。

在 CSS 中要确定沿着 z 轴排列元素，表示的是用户与屏幕的这条看不见的垂直线：

而这里我们要讨论的层叠上下文（ stacking context ），就是 HTML 中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在 z 轴上就“高人一等”，最终表现就是它离屏幕观察者更近。

我想让一个元素更加靠前，我就给他创建一个层叠上下文。

具体的创建方法，一般来讲有 3 种方法：

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

<div class="one"></div>
<div class="two"></div>

div{
  width: 200px;
  height: 200px;
}
.one{
  background-color: red;
}
.two{
  background-color: blue;
  margin-top: -100px;
}

在上面的代码中，我们创建了两个 div，然后使其产生重叠，默认情况下后来居上，蓝色的会盖住红色的。

下面我们给红色设置一个定位，如下：

...
.one{
  background-color: red;
  position: relative;
  z-index: 1;
}
...

由于设置了定位和 z-index 属性，所以红色的 div 就会创建一个层叠上下文，在 z 轴上就“高人一等”。

感觉很简单的样子。

还没结束…

层叠等级与层叠顺序

除了层叠上下文，我们还需要了解两个概念：

• 层叠等级（ stacking level ）
• 层叠顺序（ stacking order ）

这两个东西实际上都是用来表述：

在同一个层叠上下文中，元素在 z 轴上的显示顺序。

只不过前一个是概念，后一个是具体规则。

如果两个元素在同一个层叠上下文中，那么层叠等级越大的元素，就越靠前。

那么问题来了，我怎么知道该元素的层叠等级是高还是低？

所以层叠等级的高低规则是由层叠顺序来体现的。

在 CSS2.1 的年代（注意这里的前提），层叠顺序规则遵循下面这张图：

那么如果两个元素不在同一个层叠下上文中呢？

那么此时就先比较他们所处的层叠上下文的层叠等级，也就是所谓的“从父”现象。

总结：

1. 首先先看要比较的两个元素是否处于同一个层叠上下文中：

   • 如果是，谁的层叠等级大，谁在上面（判断层叠等级大小参阅上面的“层叠顺序”图）

   • 如果两个元素不在同一层叠上下文中，请先比较他们所处的层叠上下文的层叠等级。

2. 当两个元素层叠等级相同、层叠顺序相同时，在 DOM 结构中后面的元素层叠等级在前面元素之上。

示例 1：

<div class="one">
  <div class="item" style="background-color: black; z-index: 99;"></div>
</div>
<div class="two">
  <div class="item" style="background-color: pink;top: 50px; z-index: 1;"></div>
</div>

div{
  width: 200px;
  height: 200px;
}
.one{
  background-color: red;
  position: relative;
  z-index: 1;
}
.two{
  background-color: blue;
  position: relative;
  z-index: 2;
}
.item{
  width: 100px;
  height: 100px;
  position: absolute;
  left: 200px;
  top: 200px;
}

在上面的代码中，one 和 two 分别有自己的层叠上下文，但是 two 的层叠等级要比 one 高，之后我们可以看到，无论 one 中的子元素的 z-index 设置有多高，它始终被 two 的子元素给覆盖，因为如果两个元素不在同一层叠上下文中，比较的是所在层叠上下文的等级。

示例 2：

<div class="box1">
  <div class="child1"></div>
</div>

<div class="box2">
  <div class="child2"></div>
</div>

.box1,
.box2 {
  position: relative;
}

.child1 {
  width: 200px;
  height: 100px;
  background: #168bf5;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.child2 {
  width: 100px;
  height: 200px;
  background: #32c292;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

在上面的示例中，.box1/.box2 虽然设置了 position: relative，但是在没有设置 z-index。所以 .box1/.box2 仍然是普通元素，所以 child1/.child2 属于 html 元素的“根层叠上下文”中，也就是处于同一个层叠上下文中，根据层叠顺序谁的 z-index 值大，谁在上面。

示例 3:

将上面案例中的 CSS 代码稍作修改，如下：

.box1,
.box2 {
  position: relative;
  z-index: 0;
}

此时，我们发现，仅仅修改了 .box1/.box2 的 z-index 属性值改为数值 0，最终结果完全相反。

这时 .child2 覆盖在了 .child1 上面。原因是什么呢？

很简单：因为设置 z-index: 0 后，.box1/.box2 产生了各自的层叠上下文，这时候要比较 .child1/.child2 的层叠关系属于不同的层叠上下文进行比较，此时由由各自所在的 .box1/.box2 的层叠等级来决定。

但是 .box1/.box2 的 z-index 值都为 0，都是块级元素（所以它们的层叠等级，层叠顺序是相同的），这种情况下，在 DOM 结构中后面的覆盖前面的，所以 .child2 就在上面。