一般認爲HTML頁面是二維的,但實際上,CSS還有一個z-index
屬性,容許層疊元素。html
全部的盒模型元素都處於三維座標系中。 除了咱們經常使用的橫座標和縱座標, 盒模型元素還能夠沿着「z軸」層疊擺放, 當他們相互覆蓋時, z軸順序就變得十分重要。segmentfault
-- CSS 2.1 Section 9.9.1 - Layered presentationide
假定元素沒有指定z-index
屬性,那麼元素按照以下順序疊放(從底到頂)佈局
對於浮動的塊元素來講,堆疊順序變得有些不一樣。浮動塊元素被放置於非定位塊元素與定位塊元素之間:ui
若是須要改變默認的擺放順序,只需給元素指定z-index
。z-index
必須是整數,體現了元素在z軸的位置:spa
沒有指定z-index
的時候,全部元素默認在0層渲染。多個元素的z-index
屬性相同時,將按照上文描述的順序佈局。code
使用z-index排序的例子:htm
注意,div#5
的z-index無效,由於未指定position
屬性。排序
指定z-index
屬性將構造一個堆疊上下文。ci
如下元素構成堆疊上下文指:
html
z-index
值不爲auto
opacity
小於1的元素position: fixed
的元素老是會構造堆疊上下文,即便z-index
爲auto
。堆疊上下文中的子元素按照前述順序擺放。堆疊上下文內部的子堆疊上下文的z-index
只在父堆疊上下文中有意義。
總而言之:
z-index
不爲auto
,opacity
小於1的元素會構建堆疊上下文。