【轉載】div層調整zindex屬性無效緣由分析及解決方法

在作的過程當中，發現了一個很簡單卻又不少人應該碰到的問題，設置Z-INDEX屬性無效。在CSS中，只能經過代碼改變層級，這個屬性就是z-index，要讓z-index起做用有個小小前提，就是元素的position屬性要是relative，absolute或是fixed。

1.第一種狀況（z-index不管設置多高都不起做用狀況）：

這種狀況發生的條件有三個：

一、父標籤 position屬性爲relative；

二、問題標籤無position屬性（不包括static）；

三、問題標籤含有浮動(float)屬性。

eg:z-index層級不起做用，浮動會讓z-index失效，代碼以下:

1	<</code>DIV style="POSITION: relative; Z-INDEX: 9999">

2	<</code>IMG style="FLOAT: left" src="http://www.yuanchuang.net/uploads/allimg/131101/1A5494I0-0.jpg">

3	</</code>DIV>

解決辦法有三個（任一便可）：

一、position:relative改成position:absolute；

二、浮動元素添加position屬性（如relative，absolute等）；

三、去除浮動。

2.第二種狀況

IE6下，層級的表現有時候不是看子標籤的z-index多高，而要看整個DOM tree（節點樹）的第一個relative屬性的父標籤的層級。

eg:IE7與IE6有着一樣的bug，緣由很簡單，雖然圖片所在div當前的老爸層級很高(1000)，可是因爲老爸的老爸不頂用，可憐了9999如此強勢的孩子沒有出頭之日啊！，代碼以下:

1	<</code>DIV style="POSITION: relative">

2	<</code>DIV style="POSITION: relative; Z-INDEX: 1000">

3	<</code>DIV style="POSITION: absolute; Z-INDEX: 9999"> <</code>IMGsrc="http://www.yuanchuang.net/uploads/allimg/131101/1A3194V7-1.jpg"> </</code>DIV>

4	</</code>DIV>

5	</</code>DIV>

解決辦法： 在第一個relative屬性加上一個更高的層級（z-index:1），代碼以下:

1	<</code>DIV style="POSITION: relative; Z-INDEX: 1">

2	<</code>DIV style="POSITION: relative; Z-INDEX: 1000">

3	<</code>DIV style="POSITION: absolute; Z-INDEX: 9999"> <</code>IMGsrc="http://www.yuanchuang.net/uploads/allimg/131101/1A3194V7-1.jpg"> </</code>DIV>

4	</</code>DIV>

5	</</code>DIV>