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

    所有的盒模型元素都處于三維坐標系中。 除了我們常用的橫坐標和縱坐標， 盒模型元素還可以沿著“z軸”層疊擺放， 當他們相互覆蓋時， z軸順序就變得十分重要。

-- CSS 2.1 Section 9.9.1 - Layered presentation
默認的擺放規(guī)則

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

    根元素的背景和邊界
    普通流(無定位)里的塊元素(沒有position或者position:static;)按HTML中的出現(xiàn)順序堆疊
    定位元素按HTML中的出現(xiàn)順序堆疊
   

浮動

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

    根元素的背景與邊框
    位于普通流中的后代塊元素按照它們在 HTML 中出現(xiàn)的順序堆疊
    浮動塊元素
    常規(guī)流中的后代行內(nèi)元素
    后代中的定位元素按照它們在 HTML 中出現(xiàn)的順序堆疊

使用 z-index

如果需要改變默認的擺放順序，只需給元素指定z-index。z-index必須是整數(shù)，體現(xiàn)了元素在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。

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

總而言之：

    z-index不為auto，opacity小于1的元素會構建堆疊上下文。
    堆疊上下文可以嵌入其他堆疊上下文。
    每個堆疊上下文和它的同級上下文是獨立的。
    每個堆疊上下文是自包含的。

最新評論