CSS z index屬性層重疊順序

格言:努力做好自己喜歡的每一件事

對於所有定位，最後都不免遇到兩個元素試圖放在同一位置上的情況。顯然，其中乙個必須遮住另乙個。但是如何控制哪個元素放在上層，這就出現了z-index這個屬性。

z-index屬性的含義

乙個元素在文件中的層疊順序，用於確認元素在當前層疊上下文中的層疊級別。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。

z-index 屬性使用條件

z-index在設定了position屬性（position不為static的元素）的元素條件下使用。通常我們讓不同的物件盒子以不同順序重疊排列，我們就要使用z-index樣式屬性。

接下來從最簡單的不使用z-index的情況開始學習z-index 屬性。

z-index應用案例

1）對於同級元素

層疊級別大的顯示在上面，級別小的顯示在下面，也就是z-index屬性值越大的元素在z-index屬性值小的元素上面；層疊級別中的兩個元素，依據它們在html文件流中的順序，寫在後面的將會覆蓋前面的。**如下：

box

onetwo

.box

.box>.same
.box>.one
.box>.two

在還沒有給設定了position: absolute;屬性的元素.one和元素.two設定z-index屬性的情況下：

從上圖可以看出元素.two覆蓋在元素.one上面，這是因為依據它們在html文件流中的順序，寫在後面的元素將會覆蓋前面的元素。

情況二：

如果我們想要元素.two覆蓋在元素.one下面，就要給.one設定z-index屬性，情況如下：

在這裡可能就有小夥伴發現我並沒有給元素.two設定z-index屬性，元素.two為什麼會覆蓋在元素.one下面。以下我來說明以下原因：

ie6/7下position不為static，且z-index不存在時z-index為0，除此之外的瀏覽器z-index為auto。

z-index為auto的元素不參與層級關係的比較，由向上遍歷至此且z-index不為auto的元素來參與比較。

以上我們可以得出結論：在這裡元素.two的z-index的屬性值為auto不與元素.one的z-index的屬性值進行比較，而元素.one的z-index的屬性值在html文件流中最高，所以元素.two覆蓋在元素.one下面。

情況三：

如果我們給元素.two也加上z-index:1;？結果得到元素.two覆蓋在元素.one上面。那是因為：一旦z-index值相等，情況就和都不設定z-index值一樣了。

情況四：

在父元素.box新增z-index:10，在元素.two和元素.one新增z-index:2;， 這樣理論上父元素就會在上面（父元素.box覆蓋元素.two和元素.one），但是實際情況跟情況一的效果是一樣的，結果沒有變! 如下：

把兩個子元素的z-index值同時設定為-2；父元素不設定z-index屬性。結果如下：

從上圖我們只看到父元素.box，並不是元素.two和元素.one不見了，而是被父元素.box遮住了。 這說明在父元素和子元素之間還是可以作比較的！！！只是需要我們把子元素的z-index值設為負數。

2） 對於不同級元素

元素的顯示順序依據父級元素的層疊級別（z-index值）來決定，與自身的層疊級別（z-index值）無關。

有兩個div盒子，元素.two和元素.one在元素.box1裡，元素.three在元素.box2裡

box

onetwobox
three

.box

.box1
.box2
.box>.same
.box>.one
.box>.two
.box>.three

z-index的一些理解誤區

一般我們會說：z-index屬性只有和定位元素（position不為static的元素）一起使用的時候，才起作用，那首先這種說法是錯誤的，因為在css3中flex盒子的子元素也可以設定z-index屬性。

css z index層重疊順序

div 浮動到另乙個div之上 class fj1 我在下面 上的發生大幅 上的發生大幅隨碟附送的 class zj1 我浮動在上面 div css z index層重疊順序 div層 span層等html標籤層重疊順序樣式z index，平時我們使用較少，但也會難免會碰到cssz index使用。...

CSS z index 屬性詳解

z index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。該屬性設定乙個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區的軸。z index 屬性值可以是負的,如果為正數，則離使用者更近，為負數則表示離使用者更遠。z index 僅能在定位元素上奏效 p...

深入 css z index 屬性

說來汗顏，一直以來對於 css 常常是不求勝解。直到自己需要打造自己的輪子才發現對z index完全不熟悉。關於z index的問題其實非常少人完全明白它到底是怎麼運作的。事實上這並不複雜，不過如果你不曾花些時間閱讀規範可能你不曾察覺一些重要的觀念。在下面的 html 中我們有三個元素，每乙個元素包...