关于 z-index，你可能一直存在误区

当加载页面的时候，你觉得会看到什么？

这个自然不用多想，引入眼帘的肯定是一大片的蓝色，同时还有一个此前设置好尺寸的红色块级元素。除非你做了额外的设置，否则这个元素将正常地出现在左上角。

你可能会说“就这？太简单了吧”，不过有一个问题可能不那么简单：为什么红色的块级元素就一定会位于蓝色背景的上层呢？为什么我们看到的就是 div 位于 html 的上层呢？原因是，它们都遵循了层叠顺序的规则。

在这个简单的例子中，根据规则，正常文档流的子块（div）的层级将会高于根元素（html）的背景和边框。我们看到div 位于顶层，这是因为它的层叠等级更高。

虽然上面这个例子只涉及到了两个层叠等级，但实际上，在一个层叠上下文中，一共可能出现七个层叠等级，从最低到最高排列，依次是：

1. 背景和边框 ：形成层叠上下文的元素的背景和边框，它是整个上下文中层叠等级最低的。
2. Z-Index 为负数 ：设置了 z-index 为负数的子元素以及由它所产生的层叠上下文
3. 块级盒模型：位于正常文档流中的、块级的、非定位的子元素
4. 浮动盒模型 ：浮动的、非定位的子元素
5. 内联盒模型 ：位于正常文档流中的、内联的、非定位的子元素
6. Z-index 为 0：设置了 z-index 为 0 的、定位的子元素以及由它所产生的层叠上下文
7. Z-Index 为正数 ：设置了 z-index 为正数的、定位的子元素以及由它所产生的层叠上下文，它是整个上下文中层叠等级最高的

这七个层叠等级就构成了层叠顺序的规则。符合层叠等级七的元素，会比层叠等级在一到六的元素更“贴近我们”，符合层叠等级五的元素，会比层叠等级二的元素更“贴近我们”，以此类推。

第一次学习这些层叠规则的时候，我感觉收获了很多新的东西。如果只着眼于层叠等级二、六和七（也就是涉及到 z-index 的等级），那么大部分时候，我们对于 z-index 的理解是正确的。正的 z-index 的层级比 0 要高，而 0 又比负的要高，一切都符合直觉，可能大多数人到这里就不继续往后探究了。

我之前就是这样，在看到这些规则之前，以为除了正的和负的 z-index ，其它情况都可以看作是 z-index 为0 —— 不过现在我们很清楚了，这种想法是错误的。事实是，大部分元素的层级都要低于 z-index:0。

还有一个有趣的细节是，非定位的元素实际位于四种不同的层叠等级中。乍一想觉得很奇怪，不过其实这是很合理的。假设所有的非定位元素都位于同一个层叠等级，那么我们就没办法在 div （块级盒）上看到文本（内联盒）了。

来看个案例

我前面提到过很多次，当你给一个元素设置非 auto 的 z-inde 时，会创建一个新的、完全独立的层叠上下文。

重新回顾一下之前拿桌子做比喻的案例。一开始的时候，我们的桌子上摆满了四块砖头，上面是一个玻璃杯，再上面是一个水果盘。现在，假设又有一张新的桌子，它摆放的东西和旧桌子差不多，唯一的不同是，新桌子少了一个水果盘。

不难想象，旧桌子的水果盘是整个房间中位于最顶层的物品（它有最大的 z-index），不过，如果把旧桌子以及它上面的所有东西整体搬到地下室呢？此时，水果盘的层级会比新桌子上的每一个物品都要低，这是因为，放置水果盘的旧桌子整体已经低于新桌子了。

对于网页上的定位元素来说，其实道理是一样的。假设有如下代码，思考一个问题：div.two 和 div.four，哪个在上哪个在下？

HTML:

<div class="one">
  <div class="two">div>
  <div class="three">div>
div>
<div class="four">div>

CSS:

div {
  width: 200px;
  height: 200px;
  padding: 20px;
}
 
.one, .two, .three, .four {
  position: absolute;
}
  
.one {
  background: #f00;
  outline: 5px solid #000;
  top: 100px;
  left: 200px;
  z-index: 10;
}
  
.two {
  background: #0f0;
  outline: 5px solid #000;
  top: 50px;
  left: 75px;
  z-index: 100;
}
 
.three {
  background: #0ff;
  outline: 5px solid #000;
  top: 125px;
  left: 25px;
  z-index: 150;
}
 
.four {
  background: #00f;
  outline: 5px solid #ff0;
  top: 200px;
  left: 350px;
  z-index: 50;
}

尽管 div.two 有更高的 z-index（100），但在页面上，它的层级实际上比 div.four （z-index 为50）要低。下图就是页面元素的层级情况，根据黑色和黄色边框，我们可以区分每个元素生成的不同的层叠上下文。

由于 div.two  位于 div.one 中，所以它的 z-index 是和 div.one 的层叠上下文相关的，也就是说，实际表现出来的 z-index 是下面这样的：

• .one —— z-index = 10
• .two —— z-index = 10.100
• .three —— z-index = 10.150
• .four —— z-index = 50

div.one 和内部包含的一切将会在层级上低于 div.four，无论给  div.one 的子元素设置多大的 z-index，子元素的层级都无法超过 div.four。

看到这个例子是不是有一种熟悉的味道？我也曾经被 z-index 这么坑过一两次。我们都曾疑惑一个问题，为什么一个 z-index 非常大的元素，在层级上始终无法超过一个 z-index 比它小很多的元素？相信在学习了这些案例之后，你已经豁然开朗了。

总结

在最初学习 z-index 的时候，我们都会认为它很简单，这不就是代表元素在 z 轴上的位置吗？不过我们现在知道了，事情远没有这么简单。深入理解 z-index^[9] 一文也揭示了 z-index 背后一些原理层面的东西，包括层叠上下文，层叠等级以及一系列决定元素的层叠顺序的规则。

最后，记住一个很重要的结论：定位元素可以创建新的层叠上下文，在这个上下文中的所有层叠等级，都会高于或者低于另一个层叠上下文的所有层叠等级。

拓展阅读

• What No One Told You About Z-Index by Philip Walton
• The Z-Index CSS Property: A Comprehensive Look on Smashing Magazine
• How Well Do You Understand CSS Positioning?
• The stacking context on Mozilla Developer Network
• Z-Index And The CSS Stack: Which Element Displays First?

参考资料