從MDN上發(fā)現(xiàn)了一篇好的文章，它對于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 屬性被設(shè)置為 "isolate"
8.在 mobile WebKit 和 Chrome 22+ 內(nèi)核的瀏覽器中，position: fixed
總是創(chuàng)建一個新的層疊上下文, 即使 z-index 的值是 "auto" （參考 這篇文章）
9.元素的 -webkit-overflow-scrolling
屬性被設(shè)置 "touch"
便捷的分辨方法
示例圖
元素的層疊關(guān)系
元素的層疊關(guān)系由上可以得到，注意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 的元素內(nèi)層疊，所以渲染次序為 4.1
DIV #6 - z-index 為 3，在一個 z-index 為 4 的元素內(nèi)層疊，所以渲染次序為 4.3
DIV #4 - z-index 為 6，在一個 z-index 為 4 的元素內(nèi)層疊，所以渲染次序為 4.6
DIV #1 - z-index 為 5
