卡卡網

z-index在網頁設計中表示層的上下關系，在很多情況下都是需要用到的，比如一個自設計的下拉菜單，因為要顯示在其他層的上面，這時就要用上z-index這個屬性了。

今天，我將通過幾個實例，來詳解z-index的值在實際使用中如何設置，比較常見的值有：-1，0，1，auto，999等。

1. z-index的值為空、0或auto
2. z-index的值為0或1
3. z-index的值為1與999
4. 兩div的z-index值同為999
5. z-index值為-1與0

實例介紹

下面是兩個div的HTML結構：

<div class="div1">
  div1 - yellow
</div>
<div class="div2">
   div2 - red
</div>

為了使兩個div有疊加效果，我們設置它們的css：

.div1,.div2{
  width:200px;
  height:50px;
  float:left;
  position:absolute; 
}
.div1{
  left:10px;
  top:10px;
  background:yellow;
}
.div2{
  left:30px;
  top:50px;
  background:red;
}

這時兩div的顯示效果如下：

好了，我們下面開始測試兩個div的z-index各種值的顯示效果，從而理解z-index各種值的關系。

1、z-index的值為空、0或auto

空與0

CSS

.div1{}
.div2{z-index:0;}

或

.div1{z-index:0;}
.div2{}

結果一樣

所以空值與0，其實沒區別。哪個div寫在后，哪個div就顯示在上面。

0與auto

CSS

.div1{z-index:0;}
.div2{z-index:auto;}

或

.div1{z-index:auto;}
.div2{z-index:0;}

結果

所以0與auto，其實也沒區別。哪個div寫在后，哪個div就顯示在上面。

結論

當一個層沒有設置z-index這個屬性值時，那么它的z-index屬性值為空。

z-index的值為空、0或auto時，它們其實是一樣的。哪個div寫在后，哪個div就顯示在上面。

注意，div先寫后寫的意思，是指div在HTML代碼結構上的先后順序，比如第10行代碼的div，瀏覽器解析時會認為在第11行的div之前，不管第10行的div是不是后期通過JS插入的。

2、z-index的值為0或1

CSS

.div1{z-index:0;}
.div2{z-index:1;}

結果

CSS

.div1{z-index:1;}
.div2{z-index:0;}

結果

結論

z-index值為1的div永遠在值為0的div之上。

3、z-index的值為1與999

z-index值設為999是很多人常用的寫法，其目的是為了讓此div位于任何div的上面。我們現在看看代碼執行情況。

CSS

.div1{z-index:1;}
.div2{z-index:999;}

結果

CSS

.div1{z-index:999;}
.div2{z-index:1;}

結果

結論

z-index的值為999的div永遠在1的div之上。

其實，不一定非要設為999，它的規則是哪個數值大，哪個就在上面。

4、兩div的z-index值同為999

同一個頁面，由于模塊太多，有時都不知設置了多少個div的值為999。這種情況下，它們的顯示又是怎樣的呢？我們看看下面的代碼。

CSS

.div1{z-index:999;}
.div2{z-index:999;}

結果

結論

其實規則是一樣的，就是兩個div的z-index值相同時，哪個寫在后，哪個就顯示在上層。

5、z-index值為-1與0

z-index的值可以設為負數，-1，-2等任何負數均可。

但規則是一樣的，不管負數正數，數字大的div，顯示在上層。

總結

本文通過多個詳細實例，介紹了CSS z-index的屬性值的關系及區別，弄清楚之后，在使用時就不會出錯了。

您可能對以下文章也感興趣

• 使用偽元素在p或div左邊(border)上加一個感嘆號警告提示符
• 【JQuery插件】把網頁或某div或table表格內容轉為圖片并下載
• 6種方法改變div的id值（使用JQuery或JS）
• 用JQuery或JS改變div的id的五種方法
• div層顯示/隱藏的6種常見效果

標簽: z-index  div