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

這是在學習css中遇到的一個問題。

 

div層調整zindex屬性在IE中無效緣由分析及解決方法
在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="http://7te9u8.com1.z0.glb.clouddn.com/wp-content/uploads/2014/03/100084691.jpg" alt="div層調整z-index屬性無效緣由分析及解決方法">

</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="http://7te9u8.com1.z0.glb.clouddn.com/wp-content/uploads/2014/03/100084691.jpg" alt="div層調整z-index屬性無效緣由分析及解決方法">

</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="http://7te9u8.com1.z0.glb.clouddn.com/wp-content/uploads/2014/03/100084691.jpg" alt="div層調整z-index屬性無效緣由分析及解決方法">

</div>

</div>

</div>