從MDN上發(fā)現了一篇好的文章帽撑，它對于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
總是創(chuàng)建一個新的層疊上下文, 即使 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
