z-index的一些領悟

1、概念

1.什麼是z-index？

z-index屬性設置元素的堆疊順序，適用於已經定位的元素（即position:relative/absolute/fixed）。

經過z-index在layer 0上控制「已定位」元素的前後順序，其值越大元素越靠近用戶。#這裏layer 0指代root節點即html元素。

2.什麼是 Stacking Context ？

翻譯就是「堆疊上下文」。每一個元素僅屬於一個堆疊上下文，元素的z-index描述元素在相同堆疊上下文中「z軸」的呈現順序。

就像上面提到指代root節點的layer 0，在CSS中也能夠構造出與其類似的結構，這種提供z-index棧空間特性並影響子元素渲染順序的結構，咱們稱之爲stacking context。能夠理解爲是一個做用域。

3.z-index的取值：

 默認值：auto，當一個元素新生成時，他默認的z-index爲auto，他不會本身產生一個新的local stacking context，因此會處於和父box相同的堆疊上下文中；

正負整數：這個整數就是當前元素的z-index值，z-index值爲0也會生成一個local stacking context。

2、使 element 造成一個 Stackigng Content 的條件

知足如下規則的元素都將構造一個Stackigng Content 結構：

• 1.root元素（html）；
• 2.已定位元素，且指定z-index值非auto的元素；
• 3.flex item且指定z-index值非auto的元素；
• 4.opacity小於1的元素；
• 5.指定transform值非none的元素；
• 6.指定mix-blend-mode值非normal的元素；
• 7.指定filter值非none的元素；
• 8.指定isolation值爲isolate的元素；
• 9.==特例 mobile webkit & chrome 22+， 指定position: fixed的元素==；
• 10.在will-change屬性上指定值爲上述列表任意屬性的元素；
• 11.指定-webkit-overflow-scrolling值爲touch的元素。

除1.2外，其他規則均摘抄自網上資料，需驗證使用，並注意形成bug的隱患。

非定位元素 Stackigng Content 的特殊規則：

若是一個元素不是經過「定位」(position: absolute or relative)實現了stacking context，它將會以z-index: 0（高於auto）被看待，所以不管如何更改非「定位」元素的z-index都是無效的。

3、Stackigng Content 的特性

• 1.stacking context能夠嵌套；
• 2.每一個stacking context相對於兄弟元素是徹底獨立的，其內部規則不會影響到外部；
• 3.每一個stacking context元素都會被父stacking context當作一個元素施加stacking規則；

stacking context內部的元素若是沒有造成stacking context，這個元素的z-index值是auto（但其實若是這個元素沒有造成stacking context，z-index屬性對這個元素的表現根本沒有意義，咱們能夠理解爲這個元素和其parent stacking context是一體的）。

咱們經過給已定位元素指定z-index值，以改變這個元素在其parent stacking context中Z軸的「相對偏移」量。這裏的「相對偏移」指的是以parent stacking context爲基準，相對於其它兄弟元素距離用戶遠近的順序。

對於造成stacking context的元素，因爲他的z-index屬性並不對內部元素產生影響，所以這個元素的子元素以這個元素（parent stacking context）爲z-index相對基準點即z-index: auto，這些子元素的stacking context兄弟元素按照下面的遠近順序展現在屏幕：

parent stacking context >> z-index < 0 >> 非stacking context元素（z-index: auto） >> z-index >= 0
*注意在stacking context中的元素不會遠於parent stacking context

PS：即便子元素的z-index值遠遠的小於其父元素的兄弟元素的z-index值，他也會在其父元素的兄弟元素之上顯示。

渲染的時候，先肯定小的stacking context中的順序，一個小的stacking context肯定了之後再將其放在父stacking context中堆疊。有種由內而外，由小及大的感受

4、其餘一些堆疊順序

1.不使用z-index時的堆疊順序（即默認狀況）：

根元素（即HTML元素）的background和borders；

正常流中非定位後代元素（這些元素順序按照HTML文檔出現順序）；----正常流中非定位元素，老是先於定位元素渲染，因此表現就是在定位元素下方，跟它在HTML中出現的順序無關；

已定位後代元素（這些元素順序按照HTML文檔出現順序）；----沒有指定z-index值的定位元素，他們的堆疊順序取決於在HTML文檔中的順序，越靠後出現的元素，位置越高，和position屬性無關。

2.浮動堆疊順序：

浮動元素z-index位置介於非定位元素和定位元素之間。

根元素（即HTML元素）的背景和border；

正常流中非定位後代元素（這些元素順序按照HTML文檔出現順序）；

浮動元素(浮動元素之間是不會出現z-index重疊的)；

正常流中inline後代元素；

已定位後代元素（這些元素順序按照HTML文檔出現順序）。

3.z-index對堆疊順序控制的示意圖：

• Root：z-index值爲默認auto，即0
  • parent stacking context 1：z-index=1
    • stacking context：z-index=1，其父元素z-index值 1,因此最終值爲1.1
    • stacking context：z-index=2，其父元素z-index值 1,因此最終值爲1.2
    • stacking context：z-index=-2，其父元素z-index值 1,因此最終值爲1.-2
  • parent stacking context 2：z-index=2

5、使用z-index的小技巧

儘可能避免給z-index使用負值。固然不是絕對的，好比在作圖文替換的時候可使用負值。

爲避免不一樣的stacking context 賦值相同的z-index，或者不一樣的stacking context隨意賦值z-index大小的值，使z-index值太過混亂，能夠劃分父stacking context 的z-index值得區域，好比[0--100],[101--200],[201--300]，第一個父stacking context下的子stacking context一樣劃分區域，如[0-10],[11-20]......以此類推。

 

----以上內容總結整理於 starof 以及 Abruzzi 兩位前輩的博客，以及一些本身我的的領悟和實驗結果。