理解 CSS 的 z-index 屬性

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

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

-- CSS 2.1 Section 9.9.1 - Layered presentationide

默認的擺放規則

假定元素沒有指定z-index屬性,那麼元素按照以下順序疊放(從底到頂)佈局

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

浮動

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

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

使用 z-index

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

  • 底層:距離觀察者最遠
  • ……
  • -3 層
  • -2 層
  • -1 層
  • 0 層 (默認)
  • 1 層
  • 2 層
  • 3 層
  • ……
  • 頂層:最接近觀察者

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

使用z-index排序的例子:htm

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

堆疊上下文

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

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

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

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

總而言之:

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


原文 Understanding CSS z-index
節譯 SegmentFault

相關文章
相關標籤/搜索