在開始今天的內容之前，先讓我們來看下面一段代碼：
<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;
}
#div3{
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繼承性方面的知識。