一、概念
z-index伴隨著層的概念產生的。網頁中，層的概念與photoshop或是flash中層的概念是一致的。熟悉photoshop或是flash的應該知道，層級越高（圖層越靠上），越在上面顯示，如果層發生重疊，層級高的會覆蓋層級低的，如果非透明或半透明，則會遮擋。
在photoshop中
層的高低就是靠手動調的，滑鼠拖拽，或是ctrl+]或是ctrl+shift+[快捷鍵改變層的次序。如下圖，滑鼠拖移改變層次序的過程中：
在flash中
類似，可以手動改變圖層次序，或是使用as指令碼，例如：容器物件.setchildindex(顯示物件,0)就是讓物件底層顯示，而容器物件.setchildindex(顯示物件,容器物件.numchildren-1)就是最上面顯示。
在css中
z-index屬性決定了乙個html元素的層疊級別。元素層疊級別是相對於元素在z軸上（與x軸y軸相對照）的位置而言。乙個更高的z- index值意味著這個元素在疊層順序中會更靠近頂部。這個層疊順序沿著垂直的線軸被呈現。顯然，只能通過**改變層級，這個屬性就是z-index，要 讓z-index起作用有個小小前提，就是元素的position屬性要是relative，absolute或是fixed。下為z-index的示意 圖：
按照正常的思維，z-index層級越高，內容越應該在上面顯示。在大部分的瀏覽器在大部分的情況下，確實如此，但是不絕對。尤其遇到ie6，這傢伙，估計是後媽帶大的，從小營養不良，結果後來健康問題一堆又一堆。z-index的問題就是其中之一，而本文就是要講講這個ie6下z-index不www.cppcns.com起作用的問題。
二、關於效果截圖的些必要說明
1、頁面上固定不動的乙個黑色背景，透明度40%，幾乎滿屏顯示的層級為1的絕對定位層。
html為：
對應css為：#blank
作用是為了讓層級關係一目了然。看：
這說明內容在z-index為1的絕對定位層之下。
這說明內容在z-index為1的絕對定位層之上。
2、頁面上做對比的是美女，在半透明黑色絕對定位層的上面還是下面很容易辨別，這樣，您就能夠對我所說的z-index不起作用有很直觀的認識了。
三、ie6的抱怨：浮動讓我沉淪
首先講講第一種z-index無論設定多高都不起作用情況。
這種情況發生的條件有三個：
1、父標籤 position屬性為relative；
2、問題標籤無position屬性（不包括static）；
3、問題標籤含有浮動(float)屬性。
您可以拿下面的**自己做個簡單測試：
z-index都9999了，層級夠高吧，但是，看下面的圖：
現在去掉浮動，html**如下：
結果ie6下：
將程式設計客棧外部div的position:relative屬性改為 absolute可以解決這一問題
解決方法有三，1、position:relative改為position:absolute；2、去除浮動；3、浮動元素新增position屬性（如relative，absolute等）。
四、固執的ie6：它只認第乙個爸爸
用術語具體描述為：
父標籤position屬性為relative或absolute時，子標籤的absolute屬性是相對于父標籤而言的。而在ie6下，層級的表現有時候不是看子標籤的z-index多高，而要看它們的父標籤的z-index誰高誰低。
但是，相信這裡面很多人不知道程式設計客棧ie6下，決定層級高低的不是當前的父標籤，而是整個dom tree（節點樹）的第乙個relative屬性的父標籤。有時平時我們多處理乙個父標籤，z-index層級多而複雜的情況不多見，所以難免會有認識上的小小偏差。
例如下面的程式設計客棧html**：
可以看到，mm3的父標籤div 是絕對定位，層級9999，比1大多了，絕對定位的父標籤層級1000(10000也一樣)，也比黑色半透明層的z-index:1大多了，但是，我們可憐的ie6童鞋——
ie7與ie6有著同樣的bug，原因很簡單，雖然所在div當前的老爸層級很高(1000)，但是由程式設計客棧於老爸的老爸不頂用，可憐了9999如此強勢的孩子沒有出頭之日啊！
知道原因解決就很輕鬆了，給第一任老爸新增z-index後的html**如下：
結果ie6童鞋喜笑顏開，春光燦爛：
五、總結
z-index這玩意深不可測，裡面所蘊含的知識不是 css手冊上的那點東西，那只是冰山一角。這涉及到border及background的堆疊模型，涉及到同層級的顯示問題，以及瀏覽器顯示的些機制等， 這是很深的一潭水。
本文標題: ie6 z-index不起作用的完美解決方法
本文位址:
ie6 z index不起作用的解決方法
z index伴隨著層的概念產生的。網頁中，層的概念與photoshop或是flash中層的概念是一致的。熟悉photoshop或是flash的應該知道，層級越高 圖層越靠上 越在上面顯示，如果層發生重疊，層級高的會覆蓋層級低的，如果非透明或半透明，則會遮擋。層的高低就是靠手動調的，滑鼠拖拽，或是c...
z index的運用（z index不起作用）
需要完成的效果 處於hover狀態 實際完成效果碰到的問題 處於hover狀態，忽略字型圖示的不一樣，找不到一樣的 可以看到這裡再給下面的盒子新增box shadow後，陰影部分在hover狀態的情況下，還是能顯示出來。這時候想到了z index來解決問題 z index 屬性設定元素的堆疊順序。擁...
z index不起作用的大坑
話說好久就沒有更新部落格了，今天為了裝一把，差點沒把自己裝進去。以後還是低調一點好，哈哈，話不多說，直奔主題。今天遇到的就是z index不起作用的問題。乙個後台小哥不知道抽什麼瘋，寫元素覆蓋偏不讓用absolute，搞的我之後廢了9牛二虎之力寫了一下，問題描述是這樣的，一對兄弟節點,insert和...