卡卡網(wǎng)

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

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

實(shí)例介紹

下面是兩個(gè)div的HTML結(jié)構(gòu)：

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

為了使兩個(gè)div有疊加效果，我們?cè)O(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;
}

這時(shí)兩div的顯示效果如下：

好了，我們下面開(kāi)始測(cè)試兩個(gè)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，其實(shí)沒(méi)區(qū)別。哪個(gè)div寫在后，哪個(gè)div就顯示在上面。

0與auto

CSS

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

或

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

結(jié)果

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

結(jié)論

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

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

注意，div先寫后寫的意思，是指div在HTML代碼結(jié)構(gòu)上的先后順序，比如第10行代碼的div，瀏覽器解析時(shí)會(huì)認(rèn)為在第11行的div之前，不管第10行的div是不是后期通過(guò)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í)，不一定非要設(shè)為999，它的規(guī)則是哪個(gè)數(shù)值大，哪個(gè)就在上面。

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

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

CSS

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

結(jié)果

結(jié)論

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

5、z-index值為-1與0

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

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

總結(jié)

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

您可能對(duì)以下文章也感興趣

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

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