div層調整zindex屬性無效原因分析及解決方法

在做的過程中，發現了乙個很簡單卻又很多人應該碰到的問題，設定z-index屬性無效。在css中，只能通過**改變層級，這個屬性就是z-index，要讓z-index起作用有個小小前提，就是元素的position屬性要是relative，absolute或是fixed。

1.第一種情況（z-index無論設定多高都不起作用情況）：

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

1、父標籤 position屬性為relative；

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

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

eg:z-index層級不起作用，浮動會讓z-index失效，**如下:

1<divstyle="position: relative; z-index: 9999">

2<imgstyle="float: left"src="">

3

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

1、position:relative改為position:absolute；

2、浮動元素新增position屬性（如relative，absolute等）；

3、去除浮動。

2.第二種情況

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

eg:ie7與ie6有著同樣的bug，原因很簡單，雖然所在div當前的老爸層級很高(1000)，但是由於老爸的老爸不頂用，可憐了9999如此強勢的孩子沒有出頭之日啊！，**如下:

1<divstyle="position: relative">

2<divstyle="position: relative; z-index: 1000">

3<divstyle="position: absolute; z-index: 9999"> <imgsrc="">

4

5

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

1<divstyle="position: relative; z-index: 1">

2<divstyle="position: relative; z-index: 1000">

3<divstyle="position: absolute; z-index: 9999"> <imgsrc="">

4

5

div層調整zindex屬性無效原因分析及解決方法

在做的過程中，發現了乙個很簡單卻又很多人應該碰到的問題，設定z index屬性無效。在css中，只能通過 改變層級，這個屬性就是z index，要讓z index起作用有個小小前提，就是元素的position屬性要是relative，absolute或是fixed。1.第一種情況 z index無論...

div層調整zindex屬性無效原因分析及解決方法

在做的過程中，發現了乙個很簡單卻又很多人應該碰到的問題，設定z index屬性無效。在css中，只能通過 改變層級，這個屬性就是z index，要讓z index起作用有個小小前提，就是元素的position屬性要是relative，absolute或是fixed。1.第一種情況 z index無論...

解決ActiveX外掛程式Z Index屬性無效問題

摘要 在web 開發中我們經常通過 z index 設定多個元素之間的層疊關係，這種方式在多數情況下很有效，但是如果遇到有窗體元素時這種方式常常顯得無能為力，今天我們就一塊看一下如何有效的解決這個問題。內容 網頁控制項分為兩大類 有窗體元素和無窗體元素。無窗體元素包括大多數 html 元素 例如 d...