最近在寫乙個小專案，遇到很多小細節的問題，果然還是要實戰才能知道自己的不足之處啊~回歸正題，我在乙個div明明設定了屬性z-index，但是為什麼在網頁上顯示無效呢？首先排除設定的層級不夠的問題；然後我就去 w3school 查詢了才知道問題所在。
先來看官方給的定義的用法：
z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。注意看我加粗的那句話！！！然而這只是諸「元凶之一」，我查閱了一下別的資料，還有兩個條件下也能導致這個問題的出現：注釋：元素可擁有負的 z-index 屬性值。
注釋：z-index 僅能在定位元素上奏效（position屬性值設定除預設值static以外的元素，包括relative，absolute，fixed樣式）
換句話說，要想使得z-index生效，還得設定乙個position屬性，屬性值除static以外
1、父標籤 position屬性為relative
2、問題標籤含有浮動(float)屬性
解決方法也很簡單：
1、position:relative改為position:absolute；
2、去除浮動。
還有一種比較特殊的情況也會導致這個問題：
ie6 、ie7下，層級的表現有時候不是看子標籤的z-index多高，而要看整個dom tree（節點樹）的第乙個relative屬性的父標籤的層級。（萬惡的ie6啊~ ）
解決方法也很簡單： 在第乙個relative屬性加上乙個更高的層級就可以了。
z index層級在IE中無效
在css中，只能通過 改變層級，這個屬性就是z index，要讓z index起作用有個小小前提，就是元素的position屬性要是relative，absolute或是fixed。1.第一種情況 z index無論設定多高都不起作用情況 這種情況發生的條件有三個 1 父標籤 position屬性為...
z index層級在IE中無效
z index無效的兩種可能情況 第一種情況 z index無論設定多高都沒用 1 父級標籤position的屬性值沒有設定為relative 2 問題標籤中沒有寫position屬性值 不包括static 3 問題標籤有浮動屬性。第二種情況 ie相容問題 父級 第一層 頂層彈出 第三層 透明覆蓋 ...
關於z index這個層級的問題
z index它可真是乙個神奇的東西，它可以隨意安排你的層的疊加問題。如你想讓紅色矩形壓在藍色矩形上，正常布局先建立乙個紅色的再建議乙個藍色的，就可以了。但如果我相反來建立，那麼就得借助z index方法了。用z index需要先加position absolute relative定位，不然是不起...