你所不知道的z-index的用法，z-index用法

你所不知道的z-index的用法，z-index用法

  在開始今天的內容之前，先讓我們來看下面一段代碼：   

<style type="text/css">
   #div1,#div2{
       width:200px;
       height:200px;
       background-color:red;
       position: relative;
       z-index:1;
   }
    #div2{
        background-color:green;
        z-index:0;
    }
    #div1_1,#div2_1{
        width:100px;
        height:100px;
        background-color:black;
    }
    #div1_1{
        position:relative;
        z-index:-100;
        left:80px;
        top:140px;
    }
   #div2_1{
       background-color:yellow;
       z-index:999;
       position: relative;
       left:160px;
       top:-50px;
   }

</style>

<body>
<div id="div1">
    我是div1
    <div id="div1_1">
        我是div1_1
    </div>
</div>
<div id="div2">
    我是div2
    <div id="div2_1">
        我是div2_1
    </div>
</div>
</body>

'

 ???excuse me?為什麼div2_1的z-index值都999了還是比div1的元素層級低？div1_1的z-index值都為-100了還比div1高呢？不要著急，且聽我慢慢道來。

  首先我們對一個東西不熟悉的時候要先弄懂三個東西：1.這個東西是什嗎？2.有什麼用？3.怎麼用？

 我們下面也是按這三個步驟來講解這個z-index屬性。首先第一，二點，這個東西是什嗎？z-index其實是css中的一個普通屬性，主要用於設定元素的堆疊順序，直白點就是你的網頁如果有三個div重合在一起，需要按照一定順序從底層顯示到最上層，你該怎麼辦，因為在一般的網頁開發中我們是二維的，css引入這個屬性也是為了協助我們更好的布局。

其次我們開始看看這個東西怎麼用，下面我先給大家引入一些概念性的東西：

  1.z-indeex屬性設定元素的堆疊順序，擁有更高的堆疊順序的元素總是會處於堆疊順序較低的元素前面

  2.對於同級元素，預設或position:STATIC情況下文檔流後面的元素會覆蓋前面的

  3.對於同級元素，position不為static且z-index存在的情況下z-index大的元素會覆蓋z-index小的元素，及z-index越大優先順序越高

  4.ie6/7下position不為static,且z-index不存在是z-index為0，除此之外的瀏覽器z-index為auto;

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

注意：如果你設定了position:static和不設定position的元素是一樣的，對堆疊層級沒有影響（後面例子便不再說明了，後面的position預設無static的情況）

    下面我以幾個執行個體來說明：

   1.沒有z-index和 position參與時元素的堆疊順序：

     <div id="div1"></div>

     <div id="div2"></div>

     上面兩個div的堆疊法則就是後面的堆疊層級是比前面高的，就是說如果你用負margin將div2移到div1上，重合的部分是顯示的 div2而不是div1。然後有同學就會問了，那我在div2後面再加一個div3呢，這時不管你後面還有多少個div，層級都和div2相同，不會再比div2高了

2.在有position參與但無z-index參與的情況

eg：

<style type="text/css">
    /*定位規則,如果加position堆疊順序優先，所以A此時變在B上面*/
    #a,#b{
        width:100px;
        height:100px;
        background-color:red;
    }
    #b{
        background-color:green;
        margin-top:-20px;
        margin-left:20px;
    }
    #a{
        position:relative;
    }

</style>

<body>
<div id="a">
    我是A
</div>
<div id="b">
    我是B
</div>
</body>
然後你看到的是這樣的情況：

這說明啥呢，雖然b元素在a的後面，但是a加了position之後，他的堆疊層級就變高了，跑到了b的上面
，所以我們利用這個規則在無z-index參與的情況下也可以實現三層堆疊，比如這樣：

 <style type="text/css">
        /*定位規則,在沒有z-index幹擾的情況下也可以三個div也可以做出堆疊效果哦*/
        #a,#b{
            width:100px;
            height:100px;
            background-color:red;
        }
        #b{
            background-color:green;
            margin-top:-20px;
            margin-left:20px;
        }
        #a_1{
            width:50px;
            height:50px;
            background-color:blue;
            position:relative;
            left:80px;
            top:50px;
        }

    </style>
</head>
<body>
<div id="a">
    我是A
    <div id="a_1">
        我是A的子DIV
    </div>
</div>
<div id="b">
    我是B
</div>
</body>

3.有z-index參與的情況：
1.簡單的堆疊：
#div1{
position:relative;
z-index:1;
}

#div2{
position:relative;

}

#div1{
position:relative;
z-index:0;
}

<div id="div1"></div>
<div id="div2"><//div>
<div id="div3"></div>
此時的層級順序是，div1在最頂層，div2和div3均在第二層也就是最後一層。需要大家注意的一點，在position有值時，設定z-index為0和不設z-index是一樣的。

2.相對複雜的堆疊（z-index的從父原則）：
   意思就是子項目首先要看看父元素有無z-index，就像最開始的例子，當兩個父元素div1的z-index為1,div2的z-index為0時，div1的所有的子項目及自己的層級就會比div2及其子項目高，這也解釋了為什麼div2_1的z-index值設為999了都還是在div1的下面。講到這，上述例子還有一個問題，div1_1我都設了z-index為-100了，為什麼還是比div1高呢。有些同學會想，我就是想讓背景黑色div1_1在父元素div1的下邊怎麼辦呢，所以這裡還有一個原則：當父元素有設定z-index時，那麼他的子項目的層級一定會比他高，所以如果你想讓一個子項目的層級在父元素之下，你一直設定子項目的z-index，都設定成了z-index 1000了都，沒有效果，那麼不妨看看父元素是否也被設定了z-index吧！

     最後再強調一下：z-index是允許為負的 ,其次z-index的值應該是一個整數，不帶px，很多新手寫寬高寫慣了，順便就把z-index的值帶了px.其次，在使用z-index的時候，一定要配合position使用，不管這個position 的值時fixed,absolute還是relative，但在值為static和不設position的層級是一致的。

    總結一下，上面的例子好像很亂，實際情況真的不知道怎麼使用才好。個人經驗來看，首先看有無position，無position按先後順序來看層級。有position，再看看是否有z-index，在父元素的子項目設定z-index的值時，一定要注意父元素是否設定了z-index，因為父元素會影響子項目的層級，這一點很重要，也是我們最最經常犯的錯誤。如果當你一個元素的z-index值設定最大或最小都沒有效果時，不妨看看這是否你對z-index的從父原則沒有理解透徹吧!最後再說點和本文無關的，css樣式有很多屬性都具有繼承性，比如color,我們需要對其慢慢的瞭解，建議有時間大家可以去看看有關於css繼承性方面的知識。