理解 CSS 的 z-index 屬性

一般認爲HTML頁面是二維的，但實際上，CSS還有一個z-index屬性，容許層疊元素。

全部的盒模型元素都處於三維座標系中。 除了咱們經常使用的橫座標和縱座標， 盒模型元素還能夠沿着「z軸」層疊擺放， 當他們相互覆蓋時， z軸順序就變得十分重要。

-- CSS 2.1 Section 9.9.1 - Layered presentation

默認的擺放規則

假定元素沒有指定z-index屬性，那麼元素按照以下順序疊放（從底到頂）

1. 根元素的背景和邊界
2. 普通流(無定位)裏的塊元素(沒有position或者position:static;)按HTML中的出現順序堆疊
3. 定位元素按HTML中的出現順序堆疊

浮動

對於浮動的塊元素來講，堆疊順序變得有些不一樣。浮動塊元素被放置於非定位塊元素與定位塊元素之間：

1. 根元素的背景與邊框
2. 位於普通流中的後代塊元素按照它們在 HTML 中出現的順序堆疊
3. 浮動塊元素
4. 常規流中的後代行內元素
5. 後代中的定位元素按照它們在 HTML 中出現的順序堆疊

使用 z-index

若是須要改變默認的擺放順序，只需給元素指定z-index。z-index必須是整數，體現了元素在z軸的位置：

• 底層：距離觀察者最遠
• ……
• -3 層
• -2 層
• -1 層
• 0 層 （默認）
• 1 層
• 2 層
• 3 層
• ……
• 頂層：最接近觀察者

沒有指定z-index的時候，全部元素默認在0層渲染。多個元素的z-index屬性相同時，將按照上文描述的順序佈局。

使用z-index排序的例子：

注意，div#5的z-index無效，由於未指定position屬性。

堆疊上下文

指定z-index屬性將構造一個堆疊上下文。

如下元素構成堆疊上下文指：

• 根元素html
• 定位元素，且其z-index值不爲auto
• opacity小於1的元素
• 在移動WebKit、Chrome22+以上，指定position: fixed的元素老是會構造堆疊上下文，即便z-index爲auto。

堆疊上下文中的子元素按照前述順序擺放。堆疊上下文內部的子堆疊上下文的z-index只在父堆疊上下文中有意義。

總而言之：

• z-index不爲auto，opacity小於1的元素會構建堆疊上下文。
• 堆疊上下文能夠嵌入其餘堆疊上下文。
• 每一個堆疊上下文和它的同級上下文是獨立的。
• 每一個堆疊上下文是自包含的。

---

原文 Understanding CSS z-index
節譯 SegmentFault