大多數的css屬性都很容易使用。常常，當您對標記語言的元素使用css屬性時，產生的結果會隨著您重新整理頁面而立即呈現。而另一些css屬性，卻會有一些複雜，且只能在給定的環境下才會工作。
z-index屬性便屬於上面所說的後面的那一組。z-index無疑的比其他任何屬性都會頻繁的導致（相容性）上的混亂和（開發者心理上）的挫敗感。但滑稽的是，一旦你真正理解了z-index，你會發現它卻是乙個非常容易使用的屬性，並且會為解決很多layout方面的挑戰提供強有力的幫助。
在這篇文章裡，我們會準確的說明究竟什麼是z-index，它為什麼會這麼不為人所了解，並一起討論一些關於它的實際使用中的問題。我們同時會描述一些會遇到的瀏覽器間的差異，那些存在於已有版本的ie及firefox瀏覽器中的獨特問題。這篇關於z-index屬性的全透視文章將會為那些有著良好基礎的開發者在使用z-index屬性時提供強大的自信心及強有力的幫助。
這是什麼？
z-index屬性決定了乙個html元素的層疊級別。元素層疊級別是相對於元素在z軸上（與x軸y軸相對照）的位置而言。乙個更高的z-index值意味著這個元素在疊層順序中會更靠近頂部。這個層疊順序沿著垂直的線軸被呈現。
為了更清晰的描述z-index是如何工作的，上面的這張誇大展示了層疊元素在視覺位置上的關係。
自然的層疊順序
在乙個html頁面中，自然的層疊順序（也就是元素在z軸上的順序）是由很多因素決定的。下面的是乙個列表，它展示的列表項是處於乙個層疊環境（stacking context，暫時未找到合適的漢語翻譯，應該是指層疊的元素所處的那個層疊的環境）中，這些項是處於這個層疊環境的底部的。這個列表中的項都沒有被賦予z-index屬性。
元素的背景和邊框會建立乙個stacking context
引用:
·具有負值的stacking contexts元素，按照出現的先後順序排列（越靠後層級越靠上）
·沒有被定位，沒有浮動的塊級元素，按照出現的先後順序排列
·沒有被定位，浮動的元素，按照出現的先後順序排列
·內聯元素，按照出現的先後順序排列排列
·被定位的元素，按照出現的先後順序排列
z-index 屬性，當被正確使用的時候，會改變自然的層疊順序。
當然，除非元素已經被定位按照互相交疊的形式展現，否則元素的層疊順序並不會特別的明顯。下面的，負邊距的box被拿來展示，用以說明自然的層疊順序。
上面的box被定義了不同的背景和邊框色，並且後兩個是交錯的並且定義了負值的頂部邊距，所以我們可以看到自然的層疊順序。灰色的box在標記中位於第一位，藍色的box位於第二位，金色的排在第三。應用的負邊距明確的表明這個事實：這些元素未被設定z-index 屬性；它們的層疊順序是自然的，或者是預設的，復合規則的。產生交錯的現象都是因為負值的邊距。
全透視 CSS Z index 屬性 5
css 氣泡 z index 屬性還可以用來實現基於css的提示氣泡，就像下面trentrichardson.com展示的那樣 如果不是因為應用了z index 屬性，現在也不會有那麼多的品質優秀的light box指令碼可以免費使用，比如說jquery的乙個外掛程式fancybox。light b...
CSS z index 屬性詳解
z index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。該屬性設定乙個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區的軸。z index 屬性值可以是負的,如果為正數，則離使用者更近，為負數則表示離使用者更遠。z index 僅能在定位元素上奏效 p...
深入 css z index 屬性
說來汗顏，一直以來對於 css 常常是不求勝解。直到自己需要打造自己的輪子才發現對z index完全不熟悉。關於z index的問題其實非常少人完全明白它到底是怎麼運作的。事實上這並不複雜，不過如果你不曾花些時間閱讀規範可能你不曾察覺一些重要的觀念。在下面的 html 中我們有三個元素，每乙個元素包...