原文：http://www.csschina.net/a/jc/2010/0203/824.html
大多數(shù)的CSS屬性都很容易使用。常常，當(dāng)您對(duì)標(biāo)記語(yǔ)言的元素使用CSS屬性時(shí)，產(chǎn)生的結(jié)果會(huì)隨著您刷新頁(yè)面而立即呈現(xiàn)。而另一些CSS屬性，卻會(huì)有一些復(fù)雜，且只能在給定的環(huán)境下才會(huì)工作。
Z-index屬性便屬于上面所說(shuō)的后面的那一組。Z-index無(wú)疑的比其他任何屬性都會(huì)頻繁的導(dǎo)致（兼容性）上的混亂和（開(kāi)發(fā)者心理上）的挫敗感。但滑稽的是，一旦你真正理解了Z-index，你會(huì)發(fā)現(xiàn)它卻是一個(gè)非常容易使用的屬性，并且會(huì)為解決很多l(xiāng)ayout方面的挑戰(zhàn)提供強(qiáng)有力的幫助。
在這篇文章里，我們會(huì)準(zhǔn)確的說(shuō)明究竟什么是Z-index，它為什么會(huì)這么不為人所了解，并一起討論一些關(guān)于它的實(shí)際使用中的問(wèn)題。我們同時(shí)會(huì)描述一些會(huì)遇到的瀏覽器間的差異，那些存在于已有版本的IE及Firefox瀏覽器中的獨(dú)特問(wèn)題。這篇關(guān)于Z-index屬性的全透視文章將會(huì)為那些有著良好基礎(chǔ)的開(kāi)發(fā)者在使用Z-index屬性時(shí)提供強(qiáng)大的自信心及強(qiáng)有力的幫助。
這是什么？
Z-index屬性決定了一個(gè)HTML元素的層疊級(jí)別。元素層疊級(jí)別是相對(duì)于元素在Z軸上（與X軸Y軸相對(duì)照）的位置而言。一個(gè)更高的Z-index值意味著這個(gè)元素在疊層順序中會(huì)更靠近頂部。這個(gè)層疊順序沿著垂直的線軸被呈現(xiàn)。
為了更清晰的描述Z-index是如何工作的，上面的這張圖片夸大展示了層疊元素在視覺(jué)位置上的關(guān)系。
自然的層疊順序
在一個(gè)HTML頁(yè)面中，自然的層疊順序（也就是元素在Z軸上的順序）是由很多因素決定的。下面的是一個(gè)列表，它展示的列表項(xiàng)是處于一個(gè)層疊環(huán)境（stacking
context，暫時(shí)未找到合適的漢語(yǔ)翻譯，應(yīng)該是指層疊的元素所處的那個(gè)層疊的環(huán)境）中，這些項(xiàng)是處于這個(gè)層疊環(huán)境的底部的。這個(gè)列表中的項(xiàng)都沒(méi)有被賦予Z-index屬性。
元素的背景和邊框會(huì)創(chuàng)建一個(gè)stacking context
引用:
具有負(fù)值的stacking contexts元素，按照出現(xiàn)的先后順序排列（越靠后層級(jí)越靠上）
沒(méi)有被定位，沒(méi)有浮動(dòng)的塊級(jí)元素，按照出現(xiàn)的先后順序排列
沒(méi)有被定位，浮動(dòng)的元素，按照出現(xiàn)的先后順序排列
內(nèi)聯(lián)元素，按照出現(xiàn)的先后順序排列排列
被定位的元素，按照出現(xiàn)的先后順序排列
Z-index 屬性，當(dāng)被正確使用的時(shí)候，會(huì)改變自然的層疊順序。
當(dāng)然，除非元素已經(jīng)被定位按照互相交疊的形式展現(xiàn)，否則元素的層疊順序并不會(huì)特別的明顯。下面的，負(fù)邊距的BOX被拿來(lái)展示，用以說(shuō)明自然的層疊順序。
上面的BOX被定義了不同的背景和邊框色，并且后兩個(gè)是交錯(cuò)的并且定義了負(fù)值的頂部邊距，所以我們可以看到自然的層疊順序。灰色的BOX在標(biāo)記中位于第一位，藍(lán)色的BOX位于第二位，金色的排在第三。應(yīng)用的負(fù)邊距明確的表明這個(gè)事實(shí)：這些元素未被設(shè)置Z-index
屬性；它們的層疊順序是自然的，或者是默認(rèn)的，復(fù)合規(guī)則的。產(chǎn)生交錯(cuò)的現(xiàn)象都是因?yàn)樨?fù)值的邊距。
為什么它會(huì)產(chǎn)生混亂？
即使Z-index并不是一個(gè)難以理解的屬性，但它卻會(huì)因錯(cuò)誤的假設(shè)而使很多初級(jí)的開(kāi)發(fā)人員陷入混亂。混亂發(fā)生的原因是因?yàn)閆-index只能工作在被明確定義了absolute，fixed或relative
這三個(gè)定位屬性的元素中。
為了證明Z-index只能工作于被定位了的元素中，這里有同樣的三個(gè)BOX，它們應(yīng)用了Z-index屬性來(lái)嘗試打破他們自然的層疊順序。
灰色的BOX具有“9999”的Z-index值，藍(lán)色的BOX有“500”的Z-index值，金色的有“1”的Z-index值。合乎邏輯的，你會(huì)認(rèn)為這三個(gè)BOX的層疊順序會(huì)倒過(guò)來(lái)。但事實(shí)卻不是這樣，因?yàn)檫@些元素都沒(méi)被設(shè)定position屬性。
下面是同樣的三個(gè)BOX，分別都被設(shè)置了position: relative，他們的Z-index值還是按照上面那段設(shè)定。
現(xiàn)在的結(jié)果是我們所期待的了：這些元素的層疊順序?qū)崿F(xiàn)了反向；灰色的BOX覆蓋在藍(lán)色之上，藍(lán)色的覆蓋在金色之上。
語(yǔ)法
-
#grey
_box?{?? ?
-
????
width
:?
200px
;?? ?
-
????
height
:?
200px
;?? ?
-
????
border
:?
solid
?
1px
?
#ccc
;?? ?
-
????
background
:?
#ddd
;?? ?
-
????
position
:?
relative
;?? ?
-
????
z-index
:?
9999
;?? ?
-
}?? ?
-
?
-
#blue
_box?{?? ?
-
????
width
:?
200px
;?? ?
-
????
height
:?
200px
;?? ?
-
????
border
:?
solid
?
1px
?
#4a7497
;?? ?
-
????
background
:?
#8daac3
;?? ?
-
????
position
:?
relative
;?? ?
-
????
z-index
:?
500
;?? ?
-
}?? ?
-
?
-
#gold
_box?{?? ?
-
????
width
:?
200px
;?? ?
-
????
height
:?
200px
;?? ?
-
????
border
:?
solid
?
1px
?
#8b6125
;?? ?
-
????
background
:?
#ba945d
;?? ?
-
????
position
:?
relative
;?? ?
-
????
z-index
:?
1
;?? ?
-
}?
重復(fù)一下，Z-index屬性只能工作于那些被定義了position屬性的元素中。這并沒(méi)有被足夠的重視，尤其是對(duì)于那些新手。