<samp id="wiaeu"><label id="wiaeu"></label></samp>
  • <samp id="wiaeu"><label id="wiaeu"></label></samp>
    <samp id="wiaeu"></samp>
  • <samp id="wiaeu"><sup id="wiaeu"></sup></samp>
  • 技術頻道導航
    HTML/CSS
    .NET技術
    IIS技術
    PHP技術
    Js/JQuery
    Photoshop
    Fireworks
    服務器技術
    操作系統
    網站運營

    贊助商

    分類目錄

    贊助商

    最新文章

    搜索

    【8實例】詳解css z-index的值使用區別:-1,0,1,auto,999

    作者:admin    時間:2022-5-5 18:22:7    瀏覽:

    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的顯示效果如下:

     

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

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

    空與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;}

    結果

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

    結論

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

    z-index的值為空、0auto時,它們其實是一樣的。哪個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值為1div永遠在值為0div之上。

    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的值為999div永遠在1div之上。

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

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

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

    CSS

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

    結果

    結論

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

    5、z-index值為-1與0

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

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

    總結

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

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

    標簽: z-index  div  
    • IT熱文
    • 站長推薦
    公与熄电影手婬之手,日本少妇毛多水多的视频,要看肉感BBwBBWBBWBBw高清
    <samp id="wiaeu"><label id="wiaeu"></label></samp>
  • <samp id="wiaeu"><label id="wiaeu"></label></samp>
    <samp id="wiaeu"></samp>
  • <samp id="wiaeu"><sup id="wiaeu"></sup></samp>