最近在寫一個小專案，遇到很多小細節的問題，果然還是要實戰才能知道自己的不足之處啊~迴歸正題，我在一個div明明設定了屬性z-index，但是為什麼在網頁上顯示無效呢？首先排除設定的層級不夠的問題；然後我就去 W3School 查詢了才知道問題所在。
先來看官方給的定義的用法：

z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。
註釋：元素可擁有負的 z-index 屬性值。
註釋：Z-index 僅能在定位元素上奏效（position屬性值設定除預設值static以外的元素，包括relative，absolute，fixed樣式）

注意看我加粗的那句話！！！然而這只是諸“元凶之一”，我查閱了一下別的資料，還有兩個條件下也能導致這個問題的出現：
* 1、父標籤 position屬性為relative；*
* 2、問題標籤含有浮動(float)屬性；*
解決方法也很簡單：
1、position:relative改為position:absolute；
3、去除浮動。
還有一種比較特殊的情況也會導致這個問題：
IE6 、IE7下，層級的表現有時候不是看子標籤的z-index多高，而要看整個DOM tree（節點樹）的第一個relative屬性的父標籤的層級。（萬惡的IE6啊~ ）
解決方法也很簡單： 在第一個relative屬性加上一個更高的層級就可以了。

                                        感謝閱讀