z-index不起做用

之因此轉貼這篇文章，是不少朋友比較疑惑z-index這個樣式。其實只要先知道如下2點就能夠很容易的理解了——

一、要想給元素設置z-index樣式，必須先讓它變成定位元素，再通俗一點說，就是要給元素設置一個postion：relative(或者 absolute或者fixed)樣式。

二、不要給想控制「上、下」的元素設置z-index，而是對他們的父容器設置z-index樣式。這一點詳細解釋和緣由在《精通html和css設計模式》一書中較爲詳細的解釋。

《元素層疊級別（stack level）及z-index剖析》 聲明

定位元素：position屬性值設置除默認值static之外的元素，包括relative，absolute，fixed。 平臺：win/IE win/FF

z-index:

用來肯定定位元素在垂直於顯示屏方向（如下稱爲Z軸）上的層疊順序

值:      auto | 整數 | inherit
默認:      auto
適用於:  定位元素
繼承性:  no

理解stacking context

每一個box都歸屬於一個stacking context,它是元素在z軸方向上定位的參考。根元素造成 root stacking context，其餘stacking context由定位元素設置z-index爲非auto時產生。如#div1{position:relative;z-index:0;}便可使 id=div1的元素產生stacking context。stacking context和 containing block 並無必然聯繫。

理解stack level

在一個stacking context中的每一個box，都有一個stack level（即層疊級別，如下統一用stack level），它決定着在同一stacking context中每一個box在z軸上的顯示順序。同一stacking context中，stack level值大的顯示在上，stack level值小的顯示在下，同一stack level的遵循後來居上的原則（back-to-front ）。不一樣stacking context中，元素顯示順序以父級的stacking context的stack level來決定顯示的前後狀況。於自身stack level無關。注意stack level和z-index並非統一律念。（將在後文慢慢理解）

stack level規則

每一個stacking context中可包含塊級（block）元素、內聯（行內inline）元素，還有設置float屬性的元素、定位元素等等他們在同一父級 stacking context中的顯示順序是怎樣的？即stack level是怎樣的呢？好比一個塊級元素和內聯元素髮生層疊的話誰會在上面呢？是否是誰在後面誰就在上面呢？

根據w3c關於stack level的介紹能夠得出如下stack level規則

每一個stacking context都包括如下stack level （後來居上）:

1.父級stacking context的背景、邊界
2.z-index值爲負值的定位元素（值越小越在下）
3.文本流中非定位的、block塊級子元素
4.文本流中非定位的、float浮動子元素
5.彷彿能產生stacking context的inline元素
     不然，inline元素的stack level將在block元素以前。
6.z-index：auto/0的定位元素
7.z-index值爲正的定位元素（值越大越在上）

以上stack level在瀏覽器執行狀況: firefox3.0下測試徹底吻合，firefox2.0下稍有不一樣即：「z-index值爲負值的定位元素」在「父級stacking context的背景、邊界」以前。 ie6.0和7.0中：inline元素的stack level位於block元素以前，且「文本流中非定位的、float浮動子元素」（如下簡稱浮動元素）和「文本流中非定位的、block塊級子元素」（如下簡稱block元素）處於同一級。