深入理解CSS中的层叠上下文和层叠顺序_html/css_WEB-ITnose

.box {  }.box > div { background-color: blue; z-index: 1; }    /* 此时该div是普通元素，z-index无效 */.box > div > img {   position: relative; z-index: -1; right: -150px;     /* 注意这里是负值z-index */}

.box { display: flex; }.box > div { background-color: blue; z-index: 1; }    /* 此时该div是层叠上下文元素，同时z-index生效 */.box > div > img {   position: relative; z-index: -1; right: -150px;     /* 注意这里是负值z-index */}

的父元素的 display 值是 flex ，一下子升官发财变成层叠上下文元素了，于是，图片在蓝色背景上面显示了。这个现象也证实了层叠上下文元素是 flex 子元素，而不是 flex 容器元素。

另外，另外，这个例子也颠覆了我们传统的对 z-index 的理解。在CSS2.1时代， z-index 属性必须和定位元素一起使用才有作用，但是，在CSS3的世界里，非定位元素也能和 z-index 愉快地搞基。

2. opacity与层叠上下文

我们直接看代码，原理和上面例子一样，就不解释了。

如下HTML和CSS代码：

.box { background-color: blue;  }.box > img {   position: relative; z-index: -1; right: -150px;}

结果如下：

然后价格透明度，例如50%透明：

.box { background-color: blue; opacity: 0.5;  }.box > img {   position: relative; z-index: -1; right: -150px;}

结果如下：

原因就是半透明元素具有层叠上下文，妹子图片的 z-index:-1 无法穿透，于是，在蓝色背景上面乖乖显示了。

3. transform与层叠上下文

应用了transform变换的元素同样具有菜单上下文。

我们直接看应用后的结果，如下CSS代码：

.box { background-color: blue; transform: rotate(15deg);  }.box > img {   position: relative; z-index: -1; right: -150px;}

结果如下：

妹子同样在蓝色背景之上。

4. mix-blend-mode与层叠上下文

mix-blend-mode 类似于PS中的混合模式，之前专门有文章介绍-“ CSS3混合模式mix-blend-mode简介 ”。

元素和白色背景混合。无论哪种模式，要么全白，要么没有任何变化。为了让大家有直观感受，因此，下面例子我特意加了个原创平铺背景：

.box { background-color: blue; mix-blend-mode: darken;  }.box > img {   position: relative; z-index: -1; right: -150px;}

结果如下：

需要注意的是，目前，IE浏览器(包括IE14)还不支持 mix-blend-mode ，因此，要想看到妹子在背景色之上，请使用Chrome或FireFox。

同样的，因为蓝色背景元素升级成了层叠上下文，因此， z-index:-1 无法穿透，在蓝色背景上显示了。

5. filter与层叠上下文

此处说的 filter 是CSS3中规范的滤镜，不是旧IE时代私有的那些，虽然目的类似。同样的，我之前有提过，例如图片的灰度或者 图片的毛玻璃效果 等。

我们使用常见的模糊效果示意下：

.box { background-color: blue; filter: blur(5px);  }.box > img {   position: relative; z-index: -1; right: -150px;}

结果如下：

好吧，果然被你猜对了，妹子蓝色床上躺着，只是你眼镜摘了，看得有些不够真切罢了。

6. isolation:isolate与层叠上下文

isolation:isolate 这个声明是 mix-blend-mode 应运而生的。默认情况下， mix-blend-mode 会混合z轴所有层叠在下面的元素，要是我们不希望某个层叠的元素参与混合怎么办呢？就是使用 isolation:isolate 。由于一言难尽，我特意为此写了篇文章：“ 理解CSS3 isolation: isolate的表现和作用 ”，解释了其阻隔混合模式的原理，建议大家看下。

要演示这个效果，我需要重新设计下，如下HTML结构：

CSS主要代码如下：

.mode {  /* 竖妹子绝对定位，同时混合模式 */  position: absolute; mix-blend-mode: darken;}    .box {  background: blue;         }.box > img {   position: relative; z-index: -1;}

结构如下：

会发现，横妹子被混合模式了。此时，我们给妹子所在容器增加 isolation:isolate ，如下CSS所示：

.mode {  /* 竖妹子绝对定位，同时混合模式 */  position: absolute; mix-blend-mode: darken;}    .box {  background: blue; isolation:isolate;         }.box > img {   position: relative; z-index: -1;}

结果为：

会发现横着的妹子跑到蓝色背景上面了。这表明确实创建了层叠上下文。

7. will-change与层叠上下文

关于 will-change ，如果有同学还不了解，可以参见我之前写的文章：“ 使用CSS3 will-change提高页面滚动、动画等渲染性能 ”。

都是类似的演示代码：

.box { background-color: blue; will-change: transform;  }.box > img {   position: relative; z-index: -1; right: -150px;}

结果如下：

果然不出所料，妹子上了蓝色的背景。

七、层叠上下文与层叠顺序

本文多次提到，一旦普通元素具有了层叠上下文，其层叠顺序就会变高。那它的层叠顺序究竟在哪个位置呢？

这里需要分两种情况讨论：

1. 如果层叠上下文元素不依赖 z-index 数值，则其层叠顺序是 z-index:auto 可看成 z:index:0 级别；
2. 如果层叠上下文元素依赖 z-index 数值，则其层叠顺序由 z-index 值决定。

于是乎，我们上面提供的层叠顺序表，实际上还是缺少其他重要信息。我又花功夫重新绘制了一个更完整的7阶层叠顺序图（同样的版权所有，商业请购买，可得无水印大图）：

大家知道为什么定位元素会层叠在普通元素的上面吗？

其根本原因就在于，元素一旦成为定位元素，其 z-index 就会自动生效，此时其 z-index 就是默认的 auto ，也就是 0 级别，根据上面的层叠顺序表，就会覆盖 inline 或 block 或 float 元素。

而不支持z-index的层叠上下文元素天然 z-index:auto 级别，也就意味着，层叠上下文元素和定位元素是一个层叠顺序的，于是当他们发生层叠的时候，遵循的是“后来居上”准则。

我们可以速度测试下：

会发现，两者样式一模一样，仅仅是在DOM流中的位置不一样，导致他们的层叠表现不一样，后面的妹子趴在了前面妹子的身上。这也说明了，层叠上下文元素的层叠顺序就是 z-index:auto 级别。

z-index值与层叠顺序

如果元素支持z-index值，则层叠顺序就要好理解些了，比较数值大小嘛，小盆友都会，本质上是应用的“谁大谁上”的准则。在以前，我们只需要关心定位元素的z-index就好，但是，在CSS3时代，flex子项也支持 z-index ，使得我们面对的情况比以前要负复杂。然而，好的是，规则都是一样的，对于 z-index 的使用和表现也是如此，套用上面的7阶层叠顺序表就可以了。

同样，举个简单例子，看下 z-index:-1 和 z-index:1 变化对层叠表现的影响，如下两段HTML：

最后，会发现， z-index:-1 跑到了背景色小面，而 z-index:1 高高在上。

一个与层叠上下文相关的有趣的显示现象

在实际项目中，我们可能会渐进使用CSS3的fadeIn淡入animation效果增强体验，于是，我们可能就会遇到类似下面的现象：

您可以狠狠地点击这里： CSS3 fadeIn淡入animation动画有趣现象

有一个绝对定位的黑色半透明层覆盖在图片上，默认显示是这样的：

但是，一旦图片开始走fadeIn淡出的CSS3动画，文字跑到图片后面去了

：

为什么会这样？

实际上，学了本文的内容，就很简单了！fadeIn动画本质是 opacity 透明度的变化：

@keyframes fadeIn {  0% {     opacity: 0;  }  100% {    opacity: 1;  }}

要知道， opacity 的值不是 1 的时候，是具有层叠上下文的，层叠顺序是 z-index:auto 级别，跟没有 z-index 值的 absolute 绝对定位元素是平起平坐的。而本demo中的文字元素在图片元素的前面，于是，当CSS3动画只要不是最终一瞬间的 opacity: 1 ，位于DOM流后面的图片就会遵循“后来居上”准则，覆盖文字。

这就是原因，于是，我们想要解决这个问题就很简单。

1. 调整DOM流的先后顺序；

2. 提高文字的层叠顺序，例如，设置 z-index:1 ;

八、结束语

只要元素发生层叠，要解释其表现，基本上就本文的这些内容了。

我发现很多重构小伙伴都有z-index滥用，或者使用不规范的问题。我觉得最主要的原因还是对理解层叠上下文以及层叠顺序这些概念都不了解。例如，只要使用了定位元素，尤其 absolute 绝对定位，都离不开设置一个 z-index 值；或者只要元素被其他元素覆盖了，例如变成定位元素或者增加 z-index 值升级。页面一复杂，必然搞得乱七八糟。

实际上，在我看来，觉得多数常见，z-index根本就没有出现的必要。知道了内联元素的层叠水平比块状元素高，于是，某条线你想覆盖上去的时候，需要设置 position:relative 吗？不需要， inline-block 化就可以。因为IE6/IE7 position:relative 会创建层叠上下文，很烦的。

OK，本文已经够长了，就不多啰嗦了。

行为匆忙，出错在所难免，欢迎大力指正。也欢迎各种形式的交流，或者指出文中概念性的错误。

感谢阅读！

本文为原创文章，会经常更新知识点，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时内置样式和其他重要知识链接，有更好的阅读体验。

本文地址： http://www.zhangxinxu.com/wordpress/?p=5115

（本篇完）

• < 上一篇

  理解CSS3isolation:isolate的表现和作用_html/css_WEB-ITnose

• 下一篇 >

  如何用Sketch进行网页设计_html/css_WEB-ITnose