一、概念

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不起作用的問題。

二、關于效果截圖的些必要說明

1、頁面上固定不動的一個黑色背景，透明度40%，幾乎滿屏顯示的層級為1的絕對定位層。
HTML為：<div id=”blank”></div>
對應CSS為：#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}
作用是為了讓層級關系一目了然。看：

這說明內容在z-index為1的絕對定位層之下。

這說明內容在z-index為1的絕對定位層之上。