大多數(shù)的CSS屬性都很容易使用。常常當您對標記語言的元素使用CSS屬性時，產(chǎn)生的結(jié)果會隨著您刷新頁面而立即呈現(xiàn)。而另一些CSS屬性，卻會有一些復雜，且只能在給定的環(huán)境下才會工作。
Z-index屬性便屬于上面所說的后面的那一組。Z-index無疑的比其他任何屬性都會頻繁的導致（兼容性）上的混亂和（開發(fā)者心理上）的挫敗感。但滑稽的是，一旦你真正理解了Z-index，你會發(fā)現(xiàn)它卻是一個非常容易使用的屬性，并且會為解決很多l(xiāng)ayout方面的挑戰(zhàn)提供強有力的幫助。
在這篇文章里，我們會準確的說明究竟什么是Z-index，它為什么會這么不為人所了解，并一起討論一些關(guān)于它的實際使用中的問題。我們同時會描述一些會遇到的瀏覽器間的差異，那些存在于已有版本的IE及Firefox瀏覽器中的獨特問題。這篇關(guān)于Z-index屬性的全透視文章將會為那些有著良好基礎(chǔ)的開發(fā)者在使用Z-index屬性時提供強大的自信心及強有力的幫助。
這是什么？
Z-index屬性決定了一個HTML元素的層疊級別。元素層疊級別是相對于元素在Z軸上（與X軸Y軸相對照）的位置而言。一個更高的Z-index值意味著這個元素在疊層順序中會更靠近頂部。這個層疊順序沿著垂直的線軸被呈現(xiàn)。
為了更清晰的描述Z-index是如何工作的，上面的這張圖片夸大展示了層疊元素在視覺位置上的關(guān)系。
自然的層疊順序
在一個HTML頁面中，自然的層疊順序（也就是元素在Z軸上的順序）是由很多因素決定的。下面的是一個列表，它展示的列表項是處于一個層疊環(huán)境（stacking context，暫時未找到合適的漢語翻譯，應該是指層疊的元素所處的那個層疊的環(huán)境）中，這些項是處于這個層疊環(huán)境的底部的。這個列表中的項都沒有被賦予Z-index屬性。
元素的背景和邊框會創(chuàng)建一個stacking context
·具有負值的stacking contexts元素，按照出現(xiàn)的先后順序排列（越靠后層級越靠上）
·沒有被定位，沒有浮動的塊級元素，按照出現(xiàn)的先后順序排列
·沒有被定位，浮動的元素，按照出現(xiàn)的先后順序排列
·內(nèi)聯(lián)元素，按照出現(xiàn)的先后順序排列排列
·被定位的元素，按照出現(xiàn)的先后順序排列
Z-index 屬性，當被正確使用的時候，會改變自然的層疊順序。
當然，除非元素已經(jīng)被定位按照互相交疊的形式展現(xiàn)，否則元素的層疊順序并不會特別的明顯。下面的，負邊距的BOX被拿來展示，用以說明自然的層疊順序。
上面的BOX被定義了不同的背景和邊框色，并且后兩個是交錯的并且定義了負值的頂部邊距，所以我們可以看到自然的層疊順序?；疑腂OX在標記中位于第一位，藍色的BOX位于第二位，金色的排在第三。應用的負邊距明確的表明這個事實：這些元素未被設置Z-index 屬性；它們的層疊順序是自然的，或者是默認的，復合規(guī)則的。產(chǎn)生交錯的現(xiàn)象都是因為負值的邊距。
為什么它會產(chǎn)生混亂？
即使Z-index并不是一個難以理解的屬性，但它卻會因錯誤的假設而使很多初級的開發(fā)人員陷入混亂?；靵y發(fā)生的原因是因為Z-index只能工作在被明確定義了absolute，fixed或relative 這三個定位屬性的元素中。
為了證明Z-index只能工作于被定位了的元素中，這里有同樣的三個BOX，它們應用了Z-index屬性來嘗試打破他們自然的層疊順序。
灰色的BOX具有“9999”的Z-index值，藍色的BOX有“500”的Z-index值，金色的有“1”的Z-index值。合乎邏輯的，你會認為這三個BOX的層疊順序會倒過來。但事實卻不是這樣，因為這些元素都沒被設定position屬性。
下面是同樣的三個BOX，分別都被設置了position: relative，他們的Z-index值還是按照上面那段設定。
現(xiàn)在的結(jié)果是我們所期待的了：這些元素的層疊順序?qū)崿F(xiàn)了反向；灰色的BOX覆蓋在藍色之上，藍色的覆蓋在金色之上。
重復一下，Z-index屬性只能工作于那些被定義了position屬性的元素中。這并沒有被足夠的重視，尤其是對于那些新手。
運用JavaScript
如果你希望通過JavaScript為一個元素動態(tài)的加上Z-index 屬性，其語法同其他大部分CSS元素能被存取類似，就是使用“駝峰命名法”取代CSS屬性中的連字符，就像下面的代碼展現(xiàn)的那樣。
在IE 和 Firefox中的不當解析（兼容性問題）
在某些特定的情況下，關(guān)于Z-index 屬性的解析會在IE6、IE7以及Firefox2版本中存在一些小小的前后矛盾。
IE中的<select>元素
IE6中的<select>元素是一個窗口控件，所以它總是出現(xiàn)在層疊順序的頂部而不會顧及到自然層疊順序、position屬性或者是Z-index。下圖展示的就是這個問題。
<select>元素出現(xiàn)在了頂部，它被設置了“相對定位”并且Z-index值為“1”。金色的BOX在這個層疊順序中排在了第二位，它的Z-index值是“9999”。因為自然層疊順序及Z-index值的原因，在我們目前所用的所有瀏覽器中金色的BOX都會排在頂部，但IE6除外。
這個IE6的BUG導致了很多覆蓋在<select>元素上的下拉菜單在彈出下拉選項時失敗的問題。一個解決辦法是使用JavaScript臨時隱藏<select>元素，等到下拉菜單的下拉項收回時再將<select>顯示出來。其他的辦法會涉及到使用<iframe>。
IE6/IE7中被定位了的父容器
因父容器（元素）被定位的緣故，IE6/7會錯誤的對其stacking context進行重置。為了演示這個多少有些復雜的BUG，我們再一次的放置兩個BOX，但這次我們會將第一個BOX放置在一個被定位了的元素里。
灰色BOX的z-index值是“9999”；藍色BOX的z-index值是“1”，這兩個BOX都被設置了position。所以，正確的執(zhí)行應該是灰色的BOX覆蓋在藍色的之上。
但是在IE6和IE7中，我們卻會看到藍色的BOX處于灰色的之上。這是由灰色BOX外層的父容器也被設置了定位造成的。這兩款瀏覽器錯誤的將被定位的父容器的stacking context進行了“重置”，但卻不應該這樣?；疑腂OX擁有一個非常高的Z-index值，它理應因為處在藍色BOX之上。其他的瀏覽器對這個問題會進行正確的解析。 （我之前有一篇《z-index 屬性之IE/FF下同性不同貌》的博文，里面涉及的就是這個BUG）
Firefox 2中的負值
在Firefox2版本中，一個負的Z-index值會使元素位于stacking context的后面，而不是位于公認的背景和邊框這樣的元素stacking context之前。下面的截圖展示了這個Firefox 2的BUG。
下面的是上面截圖的HTML版本 ，如果你在Firefox 3或者其他目前正在被使用的瀏覽器中查看，你會看到正常的解析結(jié)果：灰色BOX的背景（元素stacking context的基底）出現(xiàn)在所有實物的下面，并且灰色BOX內(nèi)部的文字出現(xiàn)在藍色BOX的上面。
