z-index层叠上下文

从MDN上发现了一篇好的文章，它对于z-index进行了形象的描述，特此摘录过来。

形成的条件

1. 根元素 (HTML)

2.绝对（absolute）定位或相对（relative）定位且 z-index 值不为"auto"

3.一个 flex 项目(flex item)，且 z-index 值不为 "auto"，也就是父元素 display: flex|inline-flex

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

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

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

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

8.在 mobile WebKit 和 Chrome 22+ 内核的浏览器中，position: fixed
总是创建一个新的层叠上下文, 即使 z-index 的值是 "auto" （参考 这篇文章）

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

便捷的分辨方法

示例图

元素的层叠关系

元素的层叠关系由上可以得到，注意DIV4 5 6 是DIV 3 的子元素，下面是一个比较简单的判断方法。
分辨出层叠的元素在 Z 轴上的渲染顺序的一个简单方法是将它们想象成一系列的版本号，子元素是其父元素版本号之下的次要版本。
通过这个方法我们可以轻松得看出为什么一个 z-index 为 1 的元素层叠于一个 z-index 为 2 的元素之上，而一个 z-index 为 6 的元素层叠于 z-index 为 5 的元素之下。
在我们的例子中（依照最终渲染次序排列）：
Root
DIV #2 - z-index 为 2
DIV #3 - z-index 为 4
DIV #5 - z-index 为 1，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.1
DIV #6 - z-index 为 3，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.3
DIV #4 - z-index 为 6，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.6
DIV #1 - z-index 为 5