z-index是針對網頁顯示中的一個特殊屬性。因為顯示器是顯示的圖案是一個二維平面，擁有x軸和y軸來表示位置屬性。為了表示三維立體的概念如顯示元素的上下層的疊加順序引入了z-index屬性來表示z軸的區別。表示一個元素在疊加順序上的上下立體關係。
基本介紹
- 中文名：z-index
- 類別：針對網頁顯示中的一個特殊屬性
- 基本含義：一個元素在疊加順序上下立體關係
- 運用方面：電腦（網際網路)
屬性,引用方法,使用說明,注意事項,套用實例,實例1,實例2,實例3,
屬性
引用方法
z-index : auto | number
auto:默認值。
number: 無單位的整數值，可為負數 。
z-index值較大的元素將疊加在z-index值較小的元素之上。對於未指定此屬性的定位對象，z-index 值為正數的對象會在其之上，而 z-index 值為負數的對象在其之下。
使用說明
z-index 屬性指定一個元素的堆疊順序。
注意：z-index 進行定位元素(position:absolute, position:relative, or position:fixed)。
| 默認值： | auto |
|---|---|
| 繼承： | no |
| 版本： | |
| JavaScript 語法： | object.style.zIndex="1" |
注意事項
這個屬性不會作用於視窗控制項，如 select 對象。
在IE5.5+中， iframe 對象開始支持此屬性。而在之前的瀏覽器版本中， iframe 對象是視窗控制項，會忽略此屬性。
z-index屬性適用於定位元素（position屬性值為 relative 或 absolute 或 fixed的對象），用來確定定位元素在垂直於顯示屏方向（稱為Z軸）上的層疊順序（stack order）。
每一個定位元素都歸屬於一個stacking context。根元素形成root stacking context，而其他的stacking context則由定位元素產生（此定位元素的z-index被定義一個非auto的z-index值），定位子元素會以這個local stacking context為參考，用相同的規則來決定層疊順序。並且stacking context和 containing block 之間並沒有必然聯繫。
當stacking context一樣的時候，就用z-index的值來決定怎樣顯示，如果z-index也相同（即stack level相同），則按照檔中後來者居上的原則（back-to-front ）的順序來層疊。
當任何一個元素層疊另一個包含在不同stacking context元素時，則會以stacking context的層疊級別（stack level）來決定顯示的先後情況。也就是說，在相同的stacking context下才會用z-index來決定先後，不同時則由stacking context的z-index來決定。例如：
定位元素A（z-index:100）裡面有定位元素A1（z-index:300），而定位元素B和元素A兄弟關係（z-index:200）。你會發現無論A1的z-index是多大，也會被z-index是200的B所覆蓋，因為A的z-index只有100。
套用實例
首先先來看一個演示例子的代碼部分。
實例1
XHTML部分
<div id="container">
<div id="box1">這個box應該在上面</div>
</div>
<div id="box2">這個box應該在下面，IE瀏覽器會對定位元素產生一個新的stacking context ，甚至當元素 z-index的為“auto”。</div>
CSS部分
#container { position: relative; }
#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: 20; }
#box2 { position: absolute; top: 50px; left: 160px; width: 200px; height: 200px; background-color: green; z-index: 10; }
兩個box被完全的定位，背景色為黃色的box1擁有z-index屬性值20，而背景色為綠色的box2擁有z-index屬性值10，唯一的區別在於背景色為黃色的box1被放在了一個定義了屬性position:relative的div中，並且在文檔原始碼中位前。
根據上述代碼以及z-index的屬性簡介，我們來分析上面代碼將會產生的效果位置。
CSS specification 中清楚的規定了除了根元素，只有定位元素的z-index被定義一個非auto的z-index值才能產生新的stacking context。而例子中被相對定位的元素並沒有定義z-index，即z-index為默認值auto。所以按理他不會影響子元素的層疊順序。即背景色為黃色的box1和背景色為綠色的box2的stacking context相同，即都為根元素產生的root stacking context。再根據規則中當stacking context一樣的時候，就用z-index的值來決定怎樣顯示的原理，則應該z-index屬性值20的背景色為黃色的box1在z-index屬性值10背景色為綠色的box2之上。
下面我們在FF和IE中分別測試最終的效果，會發現FF中顯示的效果和上面分析的效果是完全一致的，而IE中的顯示卻不一致。
迷惑：在IE的z-index屬性值10背景色為綠色的box卻在了z-index屬性值20的背景色為黃色的box1之上，和我們分析的結果完全不一致，為什麼呢？
解惑：其實這是IE瀏覽器（windows）的一個BUG——在IE瀏覽器中，定位元素會產生一個新的stacking context，並且從z-index的值為0開始。
現在讓我們來理解上面的演示在IE中的顯示邏輯。設定了相對定位的container產生一個新的stacking context，所以其被定位的子元素背景色為黃色的box1以這個新的stacking context為參考來決定層疊順序。而背景色為綠色的box2此時和背景色為黃色的box1的父元素container為同一個stacking context，所以他們之間按照z-index來決定層疊順序，即z-index屬性值10背景色為綠色的box2在z-index屬性值0的container之上。
其實這個BUG的影響範圍很廣，只是大家平時不太注意。下面來說明一個最常見的出現情況z-index的負值解析，很多朋友因為這個BUG的存在甚至武斷的認為IE支持z-index的負值，而FF不支持z-index的負值。
舉個例子或許更能形象表達。
實例2
XHTML部分
<body>
<div id="container">
<div id="box1">為什麼負值的定位元素在IE和FF下顯示不一致呢？Why？</div>
</div>
</body>
CSS部分
#container { position: relative; }
#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: -10; }
大家會發現在FF下，背景色為黃色的box1消失了，而IE下卻顯示。這也是我上面所說的，部分朋友武斷的認為IE支持z-index的負值，而FF不支持z-index的負值的原因。我們要透過現象看本質。
在上個例子中的分析，我們知道：設定了相對位置（position: relative）的元素但沒有給出非auto的z-index就不會產生stacking context，也就不會影響其子元素的層疊順序。所以背景色為黃色的box1的stacking context為根元素產生的root stacking context。在上一節中我們講到“對於未指定此屬性的定位對象，z-index 值為正數的對象會在其之上，而 z-index 值為負數的對象在其之下”，按照規則，應該是設定了z-index為-10的黃色的box1會顯示在於未指定z-index屬性的元素（比如body）之下。所以在FF下背景色為黃色的box1消失了。而在IE中設定了相對位置的 container會擁有z-index值0，產生一個新的stacking context，背景色為黃色的box1在新的stacking context內層疊順序，故在IE中會看到顯示。
不過這裡還有一個問題，對於上面的代碼，我們再精簡一下：
實例3
XHTML部分
<body>
<div id="box1">為什麼負值的定位元素在IE和FF下顯示不一致呢？Why？</div>
</body>
CSS部分
#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: -10; }
大家會發現和上面沒精簡的代碼顯示的結果是一致的。但如果用上面的理解在IE下或許無法解釋通。因為此時的理解背景色為黃色的box1的stacking context無論在FF下還是在IE下都是根元素產生的root stacking context。
迷惑：那么在IE瀏覽器中，按照規則，背景色為黃色的box1也應該消失，然而卻沒有。
解惑：IE瀏覽器似乎給body元素默認了一個相對定位屬性（position: relative）。
通過上面兩個簡單的例子，我想大家應該大致知道為什麼負值的z-index在IE和FF解析不一樣，不是FF不支持，而是IE的BUG。
經過證明，IE7.0和Firefox/3.5.3中z-index的測試結果一致。即使z-index為負，FF中的box1也不會消失，而是顯示在box2的下一層。
#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: -10; }
