CSS必知必会：从z-index到层叠上下文

一个小问题

实现一个按钮如下图：

首先可以想到用box-shadow，但是很遗憾，设计稿是用了两个圆角矩形叠加的，下面的是纯色背景，上面的是一个半透明彩色径向渐变，形成的效果不是吸管取色能hold住的。所以还是老实按照设计稿来实现。给按钮加个after伪元素好了。

把上面的问题抽象一下：

.grandfather A
  .father B
    .son C

.grandfather {
  width: 300px;
  height: 200px;
  background-color: #999;
}

.father {
  width: 200px;
  height: 150px;
  background-color: #acc;
  position: relative;
}

.son {
  width: 100px;
  height: 100px;
  background-color: #c88;
  position: absolute;
  bottom: -40px;
}

其实目标就是让子元素C（即按钮的纯色背景）介于父元素B的背景与爷爷元素A的背景之间。

按照我之前错误的理解，我想给C加一个z-index: -1，就可以让C在其父元素B的背景后面。然而并没有。甚至可以说我完全理解错了…

层叠顺序（Stacking Order）

怎么解决？先介绍一个概念——层叠上下文（stacking context）。类似BFC，一个比较抽象的概念。根据设定，在一个具体的层叠上下文中，浏览器会依据层叠顺序规则，对上下文中的所有元素进行排序。

首先在了解这些名词之前，我们靠着丰富的CSS经验可以猜到，一个子元素，默认会显示在父元素的背景之上。废话啦，要不还能叫背景吗？如下图，绿色子元素在灰色父元素之上，也可以说是在Z轴上更靠近用户的位置。

再稍微有点经验的可以发现，inline/inline-block的元素比block元素更高一点。如下图，绿色元素是inline-block，紫色（？玫红色？）元素是利用负margin向上偏移的block。但作为文档流的后来者，理当后来居上，却被挡在了下面。

这时候我要掏出一张层叠顺序天梯图了

简而言之，如果大家都是普通block元素，按照文档流后来居上，符合常识。但如果我段位比你block元素更高，比如我是inline-block选手，那你还木有资格和我PK，轮不到你和我比什么文档流顺序，甚至都不用看你爹是谁。比如下图

按照直觉，紫色元素在绿色元素的下面，那紫色元素的内容B就应该被挡住不显示。然而并没有，B作为一个文本节点，默认是inline，在天梯排名中比绿色block更高，尽管它是叔叔元素（原谅我这么随便的起名……）

那怎么用z-index呢

这又要说回层叠上下文了。

一个层叠上下文可以理解成是一种特殊段位，它可以和z-index值组合，形成一个具体的段位。 我写了一个更详细点的图（CodePen地址）

比如一个z-index为-1的层叠上下文，它的段位就在蓝色的级别。

层叠上下文

那到底**什么是层叠上下文啊？

就像BFC，当一个元素在某些特殊情况下，就会变成一个层叠上下文。举个简单的例子，元素X绝对定位，并且z-index: 1000，它就形成了一个层叠上下文，其段位（层叠顺序）相当高。

而一个层叠上下文一旦形成，整个事情会有一些变化。元素X下的所有子元素将不再参与元素X以外的级别PK，只会在这个最近的上下文中去比较。 （还记得刚刚那个欺负叔叔元素的B吗？）

除了绝对定位配合z-index属性，还有什么办法形成层叠上下文呢？参考MDN：

根元素 (HTML)

z-index 值不为 "auto"的绝对/相对定位

一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex

opacity 属性值小于 1 的元素（参考 the specification for opacity）

transform 属性值不为 "none"的元素

mix-blend-mode 属性值不为 "normal"的元素

filter值不为“none”的元素

perspective值不为“none”的元素

isolation 属性被设置为 "isolate"的元素

position: fixed

在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值

-webkit-overflow-scrolling 属性被设置 "touch"的元素

看起来与合成层（Compositing Layer）的形成条件，有那么点异曲同工。

等一哈

有个小问题，这层叠顺序说的这么好听，好像有个地方漏了。一个绝对定位的元素，似乎也是高于普通兄弟元素（正常文档流中）的，即使没有设置z-index。它不是层叠上下文啊？属于什么段位呢？

定位元素属于 z-index: 0/auto 段位。 但需要解释一下下，首先这个段位，W3的定义是

the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.

当你使用了非static定位属性，例如absolute定位，就会自动生成z-index: auto。还有其他例如transform形成的层叠上下文，如果没有指定z-index，也默认变为auto，和定位元素同段位，遵循后来居上原则。

那一个普通元素，直接写个z-index: auto会怎么样呢？

可以，你很热爱学习。答案是没用的，因为它既不是“stacking contexts”，也不是“positioned descendants”。

一个层叠上下文的z-index为auto时，可以当作0看待。但是定位元素的z-index为auto时，不能和0等同，因为它不是层叠上下文。还记得吗，定位元素配合数值z-index会形成层叠上下文。它只是定义中的一种特殊情况。

回到需求

.grandfather A
  .father B
    .son C

.grandfather {
  position: relative;
  z-index: 0;
}

.father { 
  position: relative;
}

.son { 
  position: absolute;
  bottom: -40px;
  z-index: -1;
}

给grandfather元素设置相对定位，以及z-index: 0，即可将grandfather生成一个层叠上下文，此时father元素相当于这个上下文中的z-index: 0/auto段位，再给son元素设置一个负数z-index，即可形成一个 z-index: -1 级别的层叠上下文，理应排在father元素后面，在grandfather的背景前面，达成理想。

而在最一开始，我以为只要给son设置一个z-index: -1，结果变成了下图：

son都被grandfather挡住了，因为son的父元素father、grandfather，都不是层叠上下文，他们共同处在更上级的层叠上下文中（比如html根元素）。所以son还要和grandfather去比较段位，结果son是-1级层叠上下文，没有普通block的grandfather段位高，就被挡住了。

总结

三类层叠上下文

HTML根元素天生具有层叠上下文，称之为“根层叠上下文”。
z-index值为数值的定位元素的“传统层叠上下文”。
其他CSS3属性，参见MDN。

层叠排序规则

一个元素A向上查找最近的层叠上下文B，A只需要和B的后代元素进行比较
一个层叠上下文本身和别的元素比较顺序时，看作一个整体，内部不需考虑
层叠级别优先，同级别的遵循文档流后来居上原则。

z-index不一定是必要的

学完这么多，其实会发现很多时候不需要用z-index，比如凭经验就知道，绝对定位的元素一般会更高，再比如现在学到了inline元素也很厉害。更不要说z-index:1000000000这种操作了，当然，避免z-index的滥用又可以是另一个话题了。

就这么简单吗

凡事涉及到浏览器的具体实现，它就不好玩了。各家浏览器会有各种刁钻的差异，好在大部分使用还比较正常，可能配合上position: fixed、各种transform、filter、: hover伪类等，我只能说 good luck have fun～

参考文档

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

层叠上下文_MDN