CSS----z-index 屬性詳解
用途:
z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。
該屬性設定一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區的軸。
注意:
z-index 屬性值可以是負的, 如果為正數，則離使用者更近，為負數則表示離使用者更遠。
z-index 僅能在定位元素上奏效（position:relative/absolute/fixed;）
這個屬性不會作用於視窗控制元件，如select物件。
可能的屬性值:
| 值 | 描述 |
|---|---|
| auto | 預設。堆疊順序與父元素相等。 |
| number | 設定元素的堆疊順序。 |
| inherit | 規定應該從父元素繼承 z-index 屬性的值,任何的版本的 Internet Explorer （包括 IE8）都不支援屬性值 "inherit"。 |
不使用 z-index時堆疊順序
不使用z-index的情況，也是預設的情況，即所有元素都不用z-index時，堆疊順序如下(序號越大優先順序越高):
- 根元素（即HTML元素）的background和borders
- 正常流中非定位後代元素
- 已定位後代元素
即所有定位元素
但非定位元素和非定位元素之間和 定位元素和定位元素之間的順序取決於HTML文件出現順序, 靠後的優先
浮動z-index堆疊順序
浮動元素z-index位置介於非定位元素和定位元素之間, 堆疊順序如下(序號越大優先順序越高):
- 根元素（即HTML元素）的背景和border
- 正常流中非定位後代元素
- 浮動元素
- 正常流中inline後代元素
- 已定位後代元素
浮動元素之間是不會出現z-index重疊的
非定位元素和非定位元素之間和 定位元素和定位元素之間的順序同上取決於HTML文件出現順序, 靠後的優先
z-index元素之間的堆疊順序
再次強調z-index只適用於已經定位的元素（即position:relative/absolute/fixed）
簡單來說就是z-index的值越大優先順序越高越靠上, 但是事實上沒這麼簡單
子元素的z-index值只在父元素範圍內有效,什麼意思呢?
每一個定位元素都歸屬於一個stacking context。根元素形成root stacking context，而其他的stacking context則由定位元素產生（此定位元素的z-index被定義一個非auto的z-index值），定位子元素會以這個local stacking context為參考，用相同的規則來決定層疊順序。
當stacking context一樣的時候，就用z-index的值來決定怎樣顯示，如果z-index也相同（即stack level相同），則按照檔中後來者居上的原則（back-to-front ）的順序來層疊。
舉個例子:
定位元素A（z-index:100）裡面有定位元素A1（z-index:300），而定位元素B和元素A兄弟關係（z-index:200）。你會發現無論A1的z-index是多大，也會被z-index是200的B所覆蓋，因為A的z-index只有100。
z-index的堆疊順序是比較複雜的, 本篇只介紹一些簡單的堆疊順序, 推薦一個比較詳細的說明:
https://www.cnblogs.com/starof/p/4424926.html