谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少

开本系列，讨论一些有趣的 CSS 题目，抛开实用性而言，一些题目为了拓宽一下解决问题的思路，此外，涉及一些容易忽视的 CSS 细节。

解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。

不断更新，不断更新，不断更新，重要的事情说三遍。

<a href="http://www.cnblogs.com/coco1s/p/5893921.html">谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法</a>

<a href="http://www.cnblogs.com/coco1s/p/5895764.html">谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型</a>

<code>z-index</code> 看上去其实很简单，根据 <code>z-index</code> 的高低决定层叠的优先级，实则深入进去，会发现内有乾坤。

看看下面这题，定义两个 <code>div</code> A 和 B，被包括在同一个父 <code>div</code> 标签下。HTML结构如下：

它们的 <code>CSS</code> 定义如下：

大概描述起来，意思就是拥有共同父容器的两个 DIV 重叠在一起，是 <code>display:inline-block</code> 叠在上面，还是<code>float:left</code> 叠在上面？

注意这里 DOM 的顺序，是先生成 <code>display:inline-block</code> ，再生成 <code>float:left</code> 。当然也可以把两个的 DOM 顺序调转如下:

会发现，无论顺序如何，始终是 <code>display:inline-block</code> 的 <code>div</code> 叠在上方。

这里其实是涉及了所谓的层叠水平（stacking level)，有一张图可以很好的诠释：

运用上图的逻辑，上面的题目就迎刃而解，<code>inline-blcok</code> 的 <code>stacking level</code> 比之 <code>float</code> 要高，所以无论 DOM 的先后顺序都堆叠在上面。

稍微翻译一下：

所以我们的两个 <code>div</code> 的比较是基于上面所列出来的 4 和 5 。5 的 <code>stacking level</code> 更高，所以叠得更高。

不过！不过！不过！重点来了，请注意，上面的比较是基于两个 <code>div</code> 都没有形成 <code>堆叠上下文</code> 这个为基础的。下面我们修改一下题目，给两个 <code>div</code> ，增加一个 <code>opacity</code>:

会看到，<code>inline-block</code> 的 <code>div</code> 不再一定叠在 <code>float</code> 的 <code>div</code> 之上，而是和 HTML 代码中 DOM 的堆放顺序有关，后添加的 div 会 叠在先添加的 div 之上。

这里的关键点在于，添加的 <code>opacity:0.9</code> 这个让两个 div 都生成了 <code>stacking context（堆叠上下文）</code> 的概念。此时，要对两者进行层叠排列，就需要 z-index ，z-index 越高的层叠层级越高。

堆叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

根元素 (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"的元素

所以，上面我们给两个 div 添加 opacity 属性的目的就是为了形成 stacking context。也就是说添加 opacity 替换成上面列出来这些属性都是可以达到同样的效果。

在层叠上下文中，其子元素同样也按照上面解释的规则进行层叠。 特别值得一提的是，其子元素的 z-index 值只在父级层叠上下文中有意义。意思就是父元素的 <code>z-index</code> 低于父元素另一个同级元素，子元素 <code>z-index</code>再高也没用。

理解上面的 <code>stacking-level</code> 与 <code>stacking-context</code> 是理解 CSS 的层叠顺序的关键。

到此本文结束，如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。