CSS 中文開發手冊

CSS Positioning: Understanding z index (Miscellaneous) - CSS 中文開發手冊

通常HTML頁面可以被認為是二維的，因為文字，影象和其他元素被排列在頁面上而沒有重疊。有一個渲染流程，所有元素都知道其他人所佔用的空間。該z-index屬性可以讓您在呈現內容時調整物件分層的順序。

在CSS 2.1中，每個框在三維中都有一個位置。除了它們的水平和垂直位置，方框沿“z軸”排列，並在另一個上面格式化。Z軸位置特別相關時，框重疊視覺。

（來自CSS 2.1第9.9.1節 - 分層演示）

這意味著CSS樣式規則允許您在常規渲染圖層（圖層0）之外的圖層上放置方框。每層的Z位置被表示為表示用於渲染的堆疊順序的整數。更大的數字意味著更接近觀察者。Z位置可以用CSS z-index屬性來控制。

使用z-index看起來非常簡單：一個單獨的屬性被賦予一個整數，並且有一個易於理解的行為。但是，當z-index應用於HTML元素的複雜層次結構時，其行為可能難以理解，甚至無法預測。這是由於複雜的堆疊規則。實際上CSS規範CSS-2.1附錄E中已經保留了一個專門的章節來更好地解釋這些規則。

本文將試圖通過一些簡化和幾個例子來解釋這些規則。

1. 無z指數疊加 : 預設堆疊規則

2. 堆放浮子 : 如何處理浮動元素

3. 增加z指數 : 使用z索引更改預設的堆疊

4. 堆疊語境 : 關於堆疊上下文的說明

5. 堆疊上下文示例1：2層HTML層次結構，最後一層的z索引

6. 堆疊上下文示例2 : 2層HTML層次結構，z-索引在所有級別上

7. 堆疊上下文示例3 : 3層HTML層次結構，z-索引在第二層

  CSS 中文開發手冊