一、z-index基礎知識

1.z-index的含義

　z-index屬性指定了元素及其子元素的【z順序】，而【z順序】可以決定當元素發生覆蓋的時候，哪個元素在上面。通常一個較大的z-index值的元素會覆蓋較低的那一個。

2.屬性值

　z-index:auto; 默認值

　z-index:<integer>;整數值

z-index:inherit; 繼承

3.基本特性

　　1>支持負值；

　　2>支持CSS3 animation動畫；（並沒什麽實用應用場景）

　　3>在CSS2.1時代，需要和定位元素配合使用

　　　　如果不考慮CSS3，只有定位元素（position:relative/absolute/fixed/sticky）的z-index才有作用！在CSS3中有例外

二、z-index與定位元素

　　z-index只對定位元素有作用。要設置非static的定位屬性，z-index才會生效。

　　如果定位元素z-index沒有發生嵌套(並列的)：

　　　　1>後來者居上的準則；

　　　　2>哪個大哪個上

　　如果定位元素z-index發生嵌套：

　　　　1>祖先優先原則

　　　　前提：z-index是數值，不是auto

　　　　　　　　　　　　　　祖先後來者居上

　　　CSS2.1：（z-index：auto）當前層疊上下文生成盒子層疊水平是0。盒子（除非是根元素）不會創建一個新的層疊上下文。

三、層疊上下文和層疊水平

　　1.層疊上下文（stacking context）

　　層疊上下文是HTML元素中的一個三維概念，表示元素在z軸上有了“可以高人一等”。

　　栗子： 皇帝（你） 當官（層疊上下文） 家族（嵌套）

　　· 層疊上下文表示普通老百姓HTML元素當官了，離皇帝更近了。

　　· 頁面根元素天生具有層疊上下文，稱之為“根層疊上下文” -（皇親國戚）

　　· z-index值為數值的定位元素也具有層疊上下文。 -（科考入選）

　　· 其他屬性...... -其他當官途徑（見第六部分）

　　2.層疊水平（stacking level）

　　層疊上下文中的每個元素都有一個層疊水平，決定了同一個層疊上下文中元素在z軸上的顯示順序。

　　遵循“後來居上”和“誰大誰上”的層疊準則

　　層疊水平和z-index不是一個東西。普通元素也有層疊水平。z-index只在定位元素上起作用。

　　3.層疊上下文的幾個特性：

　　1>層疊上下文可以嵌套，組合成一個分層次的層疊上下文。

　　2>每個層疊上下文和兄弟元素獨立：當進行層疊變化或渲染的時候，只需要考慮後代元素。

　　3>每個層疊上下文是自稱體系的：當元素的內容被層疊後，整個元素被認為是在父層的層疊順序中。

四、元素的層疊順序 stacking order

　　層疊順序：元素發生層疊時候有著特定的垂直顯示順序

　　意義：規範元素重疊時候的呈現規則。

　　著名的7階層疊水平（stacking level）

　　這樣的層疊順序更符合頁面加載的功能和視覺呈現的。內容是頁面最重要是實體，因此層疊水平要高。

文字是內聯水平display:inline.

上圖中的層疊順序：1>inline-block大於block

　　　　　　　　　2> 文字和inline-block方塊的層疊水平一樣。如果元素的層疊水平一樣，沒有別的因素幹擾，則遵循後來者居上原則。

五、z-index與層疊上下文

　　1.行為要點：

　　1>定位元素默認z-index:auto可以看成是z-index:0（層級理解上）；

　　　定位元素會覆蓋普通元素。因為：z-index只對定位元素起作用，z-index:auto的層疊順序大於圖片這個內聯元素。

　　2>z-index不為auto的定位元素會創建層疊上下文；

　　 z-index負值的層疊順序在層疊上下文元素背景色之上（如圖3）

　　　　從層疊順序上講，z-index:auto 可以看成z-index:0;

　　　 但是從層疊上下文來講，兩者卻有著本質差異。

　　　 但是在IE7之下有bug，z-index:auto 也會創建層疊上下文。

　　3>z-index層疊順序的比較止步於父級層疊上下文；

六、其他CSS屬性與層疊上下文（不只是z-index）

　　　　1.z-index值不為auto的flex項：

　　　　圖片的層疊上下文是.box

　　　　.box之所以成為層疊上下文元素，是因為他的子元素的z-index不是auto，這兩個要配合使用

　　　　2.opacity != 0

　　3.transform（旋轉）的值不是none

　　4.mix-blend-node（混合模式）不是normal：

　　5.filter != none

　　6.isolation:isolate與層疊上下文（與混合模式應運而生）

　　7.position:fixed（Firefox與IE瀏覽器不會）

七、z-index與其他CSS屬性層疊上下文——非定位元素層疊上下文和z-index的關系

　　1.不支持z-index的層疊上下文元素的層疊順序均是z-index:auto級別

　　　　舉個例子：

　　2.依賴z-index的層疊上下文元素的層疊順序取決於z-index值

　　　　依賴z-index值創建層疊上下文的情況：

　　　　1>position值為relative/absolute或fixed（部分瀏覽器）

　　　　2>display:flex | inline-flex 容器的子flex項

　　　　　這裏不明白，感覺跟上面講display:flex的時候不一樣。。

八、z-index相關實踐

　　1.最小化影響原則

　　　　目的：避免z-index嵌套層級關系混亂

　　　　原因：1>元素的層疊水平主要由所在的層疊上下文決定；

　　　　　　　2>IE7 z-index:auto也會新建層疊上下文；

　　　　做法：1>避免使用定位屬性

　　　　　　　2>定位屬性從大容器平級分離為私有小容器；

　　2.不犯二準則

　　　　目的：避免z-index混亂，一山比一山高的樣式問題

　　　　原因：多人協作以及後期維護；

　　　　做法：對於非浮層元素，避免設置z-index值，z-index值沒有任何道理需要超過2——不犯二準則；

　　3.組件層級計數器

　　　　目的：避免浮層組件因z-index被覆蓋的問題

　　　　原因：1>總會遇到意想不到的高層級元素；

　　　　　　　2.組件的覆蓋規則具有動態性；

　　　　做法：通過JS獲得body下子元素的最大z-index值

CSS深入理解之z-index