例

設置圖像的 z-index：

img{position:absolute;left:0px;top:0px;z-index:-1;}

屬性定義及使用說明

z-index 屬性指定一個元素的堆疊順序。

擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。

注意： z-index 進行定位元素(position:absolute, position:relative, or position:fixed)。

瀏覽器支持

表格中的數字表示支持該屬性的第一個瀏覽器版本號。

屬性值

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

、前言

網頁顯示實際上是三維的，我們直觀看到的有x軸和y軸，但在網頁布局上還有一個z軸，對于定位元素，我們使用top、right、left、bottom來實現元素在x-y平面上的定位，但為了表示布局的三維立體概念，還引入了z-index，z-index屬性用來設置元素的堆疊順序，擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的上方。

z-index有三個參數：

1. auto：默認值，相當于未設置z-index，可看作z-index: 0
2. number：無單位數字，用來設置z-index大小
3. inherit：繼承父元素的z-index屬性值

舉個小例子熱熱身

 <div style="width: 100px; height: 100px; background-color: red; position: relative;"></div>
 <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px;"></div>

第二個div向上移動50px，與第一個div產生了重疊部分，顯示情況如下：

第二個div顯示在了第一個div上方，也就是重疊部分第二個div遮住了第一個div，現在給第一個div添加z-index屬性：

 <div style="width: 100px; height: 100px; background-color: red; position: relative; z-index: 1;"></div>
 <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px;"></div>

我們將第一個div的z-index屬性設置為1

這時我們發現第一個div遮住了第二個div，下面我們將逐步介紹定位元素屬性z-index。

二、z-index只對定位元素奏效

定位元素（position 屬性值為 relative 或 absolute 或 fixed）可以理解為具有x、y、z坐標的元素。如果定位元素沒有顯示給出z-index屬性，那么它的z-index默認值為0，如果一個元素不是定位元素，那給它設置z-index屬性也是無效的。

例子來了

 <div style="width: 100px; height: 100px; background-color: red; z-index: 5;"></div>
 <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px; z-index: 1;"></div>

第一個div的z-index設置為5，第二個div的z-index設置為1

我們看到第二個div覆蓋了第一個div，雖然第一個div的z-index屬性值更大，但它不是定位屬性，所以它的z-index不起作用。

三、非定位元素與非定位元素，以及相同z-index的堆疊順序比較

如果兩個元素都為非定位元素，或者兩個定位元素的z-index值相等，那么按照文檔流的順序，后寫的元素將覆蓋先寫的元素。

兩個例子

1. 兩個都未設置z-index的定位元素

 <div style="width: 100px; height: 100px; background-color: red; position: relative;"></div>
 <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px;"></div>

后寫的這個div（背景為black）覆蓋了先寫的div（背景為red）

2. 兩個非定位元素

 <div style="width: 100px; height: 100px; background-color: red;"></div>
 <div style="width: 100px; height: 100px; background-color: black; margin-top: -50px;"></div>

后寫的這個div（背景為black）覆蓋了先寫的div（背景為red）

四、定位元素與非定位元素的堆疊順序

如果定位元素未設置z-index或者z-index為正數，那么此類該定位元素的堆疊順序大于非定位元素；如果定位元素z-index為負數,那么此類定位元素堆疊順序小于非定位元素。

例如

第一個定位元素div的z-index為正數，第二個為非定位元素div，第一個定位元素div的z-index為負數

 <div style="width: 100px; height: 100px; background-color: green; position: relative; top: 50px; z-index: 1"></div> 
 <div style="width: 100px; height: 100px; background-color: red;"></div>
 <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px; z-index: -1;"></div>

z-index為正數的定位元素覆蓋了非定位元素，非定位元素覆蓋了 z-index為負數的定位元素

五、父子及兄弟的堆疊順序

1. 如果父元素設置了z-index且不是默認值auto，無論子元素的z-index為何值，子元素堆疊順序永遠大于其父元素；

 <div style="width: 200px; height: 200px; background-color: green; position: relative; top: 50px; z-index: 100">
 <div style="width: 100px; height: 100px; background-color: blue; position: relative; z-index: -10;"></div> 
 </div>

雖然子div的z-index值小于其父div，但子div仍顯示在了父div的上方

2. 如果父元素未設置z-index或值為auto，那么當子元素z-index為負數時，父元素堆疊順序將大于子元素，否則子元素堆疊順序大于父元素

 <div style="width: 200px; height: 200px; background-color: green; position: relative; top: 50px;">
 <div style="width: 100px; height: 100px; background-color: blue; position: relative; z-index: -1;"></div>
 </div>

父元素未設置z-index，子元素z-index為-1，可以看到子元素被父元素覆蓋了

3. 無論父元素的z-index如何，兄弟元素間的z-index值都可相互比較，z-index值越大堆疊順序越高

 <div style="width: 200px; height: 200px; background-color: green; position: relative; top: 50px;">
 <div style="width: 100px; height: 100px; background-color: red; position: relative; z-index: 2;"></div>
 <div style="width: 100px; height: 100px; background-color: black; position: relative; z-index: 1; top: -50px;"></div> 
 </div>

第一個子元素的z-index大于第二個子元素的z-index，所以第一個子元素覆蓋第二個子元素

3. 對于父元素及兄弟元素之外的其它元素，子元素的堆疊順序由其父元素的z-index決定。

 <div style="position: relative; z-index: 10;">
 <div style="width: 100px; height: 100px; background-color: red; position: relative; z-index: 2;"></div>
 </div>
 <div style="position: relative; z-index: 5;">
 <div style="width: 100px; height: 100px; background-color: black; position: relative; z-index: 3; top: -50px;"></div> 
 </div>

盡管背景為紅色的子div元素z-index小于背景為黑色的子div元素，但紅色仍覆蓋了黑色，就是因為紅色div的父元素z-index大于黑色div的父元素，所以無論黑色子div的z-index多大，它的堆疊順序始終小于紅色div。

六、最后

如有錯誤或不足之處還望指出探討，十分感謝！