div層調整z-index屬性在IE中無效緣由分析及解決方法

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

1.第一種狀況（z-index不管設置多高都不起做用狀況）： 
這種狀況發生的條件有三個： 
一、父標籤 position屬性爲relative； 
二、問題標籤無position屬性（不包括static）； 
三、問題標籤含有浮動(float)屬性。 

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

代碼以下:

<div style="position:relative; z-index:9999;"> 
<img style="float:left;" src="a.jpg" /> 
</div> 

解決辦法有三個（任一便可）： 
一、position:relative改成position:absolute； 
二、浮動元素添加position屬性（如relative，absolute等）； 
三、去除浮動。 

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

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

代碼以下:

<div style="position:relative;"> 
<div style="position:relative; z-index:1000;"> 
<div style="position:absolute; z-index:9999;"> 
<img src="a.jpg" /> 
</div> 
</div> 
</div> 

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

代碼以下:

<div style="position:relative; z-index:1;">  <div style="position:relative; z-index:1000;">  <div style="position:absolute; z-index:9999;">  <img src="a.jpg" />  </div>  </div>  </div>