一、z-index

z-index用來控制元素重疊時堆疊順序。

適用於：已經定位的元素（即position:relative/absolute/fixed）。

一般理解就是數值越高越靠上，好像很簡單，但是當z-index應用於復雜的HTML元素層次結構，其行為可能很難理解甚至不可預測。因為z-index的堆疊規則很復雜，下面一一道來。

首先解釋一個名詞：

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

z-index取值：

默認值auto：

當頁面新生成一個box時，它默認的z-index值為auto，意味著該box不會自己產生一個新的local stacking context，而是處於和父box相同的堆疊上下文中。

正/負整數

這個整數就是當前box的z-index值。z-index值為0也會生成一個local stacking context，這樣該box父box的z-index就不會和其子box做比較，相當於隔離了父box的z-index和子box的z-index。

接下來從最簡單的不使用z-index的情況開始將，循序漸進。

二、不使用 z-index時堆疊順序

不使用z-index的情況，也是默認的情況，即所有元素都不用z-index時，堆疊順序如下（從下到上）

• 根元素（即HTML元素）的background和borders
• 正常流中非定位後代元素（這些元素順序按照HTML文檔出現順序）
• 已定位後代元素（這些元素順序按照HTML文檔出現順序）

• 正常流中非positoned element元素，總是先於positioned element元素渲染，所以表現就是在positioned element下方，跟它在HTML中出現的順序無關。

• 沒有指定z-index值的positioned element，他們的堆疊順序取決於在HTML文檔中的順序，越靠後出現的元素，位置越高，和position屬性無關。

例子：

有圖有真相：

分析：

#5沒有定位，處於正常流，所以根據以上規則，先於#1,#2,#3,#4這些已定位元素渲染，在最下方。

#1，#2，#3，#4都是已定位元素，且未設置z-index，所以根據其在文檔中出現的順序依次被渲染，可以去掉apacity查看清晰效果。

三、浮動堆疊順序

浮動元素z-index位置介於非定位元素和定位元素之間。（從下到上）

• 根元素（即HTML元素）的背景和border
• 正常流中非定位後代元素（這些元素順序按照HTML文檔出現順序）
• 浮動元素(浮動元素之間是不會出現z-index重疊的)
• 正常流中inline後代元素
• 已定位後代元素（這些元素順序按照HTML文檔出現順序）

non-positioned元素的背景和邊界沒有被浮動元素影響，但是元素中的內容受影響（浮動布局特性）

舉例：

分析：

#4是正常流中非定位的元素，所以先被渲染，在最底層。

#2 #3一個左浮動，一個右浮動，接著被渲染。彼此不會因為z-index值被覆蓋。見下圖。

#1 #5為已定位的元素，最後被渲染，當瀏覽器窗口變小時，#5在#1上面，因為HTML文檔中#5在#1後面。見下圖。

四、z-index

默認的堆疊順序上面說了，要想改變 元素的堆疊順序就得用到z-index。

Note:前兩種情況中，雖然有元素之間的重疊覆蓋，但是它們都是處在同一個z-layer的。因為沒有設置z-index屬性，默認的渲染層就是layer 0。所以要註意，不同層中元素之間覆蓋是理所當然的，但是同一層中的元素也會發生覆蓋。

z-index只適用於已經定位的元素（即position:relative/absolute/fixed）。

舉例：

五、stacking context

為什麽上個例子中元素的堆疊順序受z-index的影響呢？因為這些元素有些特殊的屬性觸發它們生存堆疊上下文（stacking context）。

問題來了，什麽樣的元素會生成堆疊上下文呢？符合下面規則之一的：

• 根元素（即HTML元素）
• 已定位元素（即絕對定位或相對定位）並且z-index不是默認的auto。
• a flex item with a z-index value other than "auto",
• 元素opacity屬性不為1(See the specification for opacity)
• 元素transform不為none
• 元素min-blend-mode不為normal
• 元素filter屬性不為none
• 元素isolation屬性為isolate
• on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is "auto" (See this post)
• specifing any attribute above in will-change even you don‘t write themselves directly (See this post)
• elements with -webkit-overflow-scrolling set to "touch"

在堆疊上下文（stacking context）中 ，子元素的堆疊順序還是按照上述規則。重點是，子元素的z-index值只在父元素範圍內有效。子堆疊上下文被看做是父堆疊上下文中一個獨立的模塊，相鄰的堆疊上下文完全沒關系。

總結幾句：

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

舉例：HTML結果如下，最外層是HTML元素，包含#1 #2 #3，#3中又包含著#4,#5,#6。

Root(HTML)

• DIV #1
• DIV #2
• DIV #3
  • DIV #4
  • DIV #5
  • DIV #6

效果：

分析一下：

1、因為設置了div {opacity: 0.7; position: relative;}，所以#1~#6的z-index都是有效的。

2、為什麽#4的z-index比#1高，但是卻在#1下面？因為#4的z-index雖然值大，但它的作用域在包含塊#3內，而#1的z-index的作用域在html內，和#3同屬html，而#3的z-index小於#1。

3、為什麽#2的z-index值比#5的大，還在下面？同上。

4、#3的z-index是4，但該值和#4,#5,#6的z-index不具有可比性，它們不在一個上下文環境。

5、如何輕易的判斷兩個元素的堆疊順序？

z-index對堆疊順序的控制類似於排版時候一大章下幾個小節的樣子，或者版本號中一個大的版本號跟著小版本號。

Root-z-index值為默認auto，即0

• 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

想看更多例子，可參考文章最後的資源鏈接。

六、 合理使用z-index數值

如果現有三個堆疊的層，從上到下分別為：DIV3，DIV2，DIV1，設置時以100為間隔，設置DIV1的z-index為0，DIV2的z-index為100，設置DIV3的z-index為200。這樣後期如果需要在DIV1和DIV2之間加入一些層的話，以10為間隔，設置z-index為10，20等。再需要向z-index0和z-index10之間加入一層的話以5為間隔。這樣的寫法可以方便後期擴展添加內容。

盡量避免給z-index使用負值。當然不是絕對的，比如在做圖文替換的時候可以使用負值。

七、資源鏈接

MDN z-index

understanding css z-index

1. Stacking without z-index : Default stacking rules
2. Stacking and float : How floating elements are handled
3. Adding z-index : Using z-index to change default stacking
4. The stacking context : Notes on the stacking context
5. Stacking context example 1 : 2-level HTML hierarchy, z-index on the last level
6. Stacking context example 2 : 2-level HTML hierarchy, z-index on all levels
7. Stacking context example 3 : 3-level HTML hierarchy, z-index on the second level

w3c z-index

本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.cnblogs.com/starof/p/4424926.html有問題歡迎與我討論，共同進步。

z-index堆疊規則