从MDN上发现了一篇好的文章，它对于z-index进行了形象的描述，特此摘录过来。
形成的条件
- 根元素 (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
