卡卡網(wǎng)

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

今天，我將通過幾個實例，來詳解z-index的值在實際使用中如何設(shè)置，比較常見的值有：-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結(jié)構(gòu)：

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

為了使兩個div有疊加效果，我們設(shè)置它們的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各種值的關(guān)系。

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

空與0

CSS

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

或

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

結(jié)果一樣

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

0與auto

CSS

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

或

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

結(jié)果

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

結(jié)論

當(dāng)一個層沒有設(shè)置z-index這個屬性值時，那么它的z-index屬性值為空。

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

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

2、z-index的值為0或1

CSS

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

結(jié)果

CSS

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

結(jié)果

結(jié)論

z-index值為1的div永遠(yuǎn)在值為0的div之上。

3、z-index的值為1與999

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

CSS

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

結(jié)果

CSS

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

結(jié)果

結(jié)論

z-index的值為999的div永遠(yuǎn)在1的div之上。

其實，不一定非要設(shè)為999，它的規(guī)則是哪個數(shù)值大，哪個就在上面。

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

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

CSS

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

結(jié)果

結(jié)論

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

5、z-index值為-1與0

z-index的值可以設(shè)為負(fù)數(shù)，-1，-2等任何負(fù)數(shù)均可。

但規(guī)則是一樣的，不管負(fù)數(shù)正數(shù)，數(shù)字大的div，顯示在上層。

總結(jié)

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

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

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

標(biāo)簽: z-index  div