因為顯示器顯示的圖案是一個二維平面，擁有x軸和y軸來表示位置屬性。為了表示三維立體的概念如顯示元素的上下層的疊加順序引入了z-index屬性來表示z軸的區別，表示一個元素在疊加順序上的上下立體關系。

? 可能的值： 注釋： ?所有主流瀏覽器都支持 z-index 屬性。任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值?"inherit"。 IE6/7下position不為static，且z-index不存在時z-index為0，除此之外的瀏覽器z-index為auto。 z-index為auto的元素不參與層級關系的比較，由向上遍歷至此且z-index不為auto的元素來參與比較。 概念： ? z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。z-index 僅能在定位元素上奏效。 ? ? 演示： ? 1. 兩個div，無設置z-index，第二個粉色div向上移動50px時，正常顯示如下圖。 <div style="width:200px;height:200px;background-color:#f5ff7d;"></div>

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

? --------------------------------------------------------------------------------------------------- 2. 粉色div設置z-index為-5時，如下圖。（注：粉色div已設置position : relative ，故z-index可生效?） <div style="width:200px;height:200px;background-color:#f5ff7d;"></div>
<div style="width:100px;height:100px;background-color:#ff7a74;position:relative;top:-50px;z-index:-5;"></div>?
--------------------------------------------------------------------------------------------------- 3. 黃色div設置z-index為30，粉色為25時，30>25，結果如下圖。 <div style="width:200px;height:200px;background-color:#f5ff7d;z-index:30;"></div>

<div style="width:100px;height:100px;background-color:#ff7a74;position:relative;top:-50px;z-index:25;"></div>

z-index屬性適用于定位元素（position屬性值為 relative 或 absolute 或 fixed的對象），用來確定定位元素在垂直于顯示屏方向（稱為Z軸）上的層疊順序，也就是說如果元素沒有定位，對其設置的z-index是無效的。雖然黃色div的z-index比粉絲div的大，但是由于黃色div未定位，其z-index屬性未起作用，所以仍然會被粉色div覆蓋。 --------------------------------------------------------------------------------------------------- 相同z-index： ? ? ? 1. 如果兩個元素都沒有定位發生位置重合現象或者兩個都已定位元素且z-index相同發生位置重合現象，那么按文檔流順序，后面的覆蓋前面的。 <div style="width:200px;height:200px;background-color:#f5ff7d;position:relative;z-index:1;"></div> <div style="width:100px;height:100px;background-color:#ff7a74;position:relative;top:-50px;z-index:1;"></div> 2. 如果兩個元素都沒有設置z-index，使用默認值，一個定位一個沒有定位，那么定位元素覆蓋未定位元素 <div style="width:200px;height:200px;background-color:#f5ff7d;position:relative;top:50px;"></div> <div style="width:100px;height:100px;background-color:#ff7a74;"></div> --------------------------------------------------------------------------------------------------- 父子z-index關系處理： ? 1.?如果父元素z-index有效，那么子元素無論是否設置z-index都和父元素一致，在父元素上方 <div style="width:200px;height:200px;background-color:#f5ff7d;position:relative;z-index:10;"> <div style="width:100px;height:100px;background-color:#ff7a74;position:relative;z-index:-5;"></div> </div> --------------------------------------------------------------------------------------------------- 2. 如果父元素z-index失效（未定位或者使用默認值），那么定位子元素的z-index設置生效 ? ? ? ? <div style="width:200px;height:200px;background-color:#f5ff7d;position:relative;"> <div style="width:100px;height:100px;background-color:#ff7a74;position:relative;z-index:-5;"></div> </div> ---------------------------------------------------------------------------------------------------

兄弟子元素z-index關系處理：

如果兄弟元素的z-index生效，那么其子元素覆蓋關系有父元素決定 <div style="width:100px;height:100px;background-color:#f5ff7d;position:relative;z-index:5;"> <div style="width:50px;height:250px;background-color:#ff7a74;position:relative;z-index:50;"></div> </div>

<div style="width:100px;height:100px;background-color:#c6c500;margin-top:-10px;position:relative;z-index:10;">

　　<div style="width:30px;height:150px;background-color:#5ddaff;position:relative;z-index:-10;"></div>

</div>

?

雖然第一個div的子元素（即s1）的z-index比較高，但是由于其父元素（即f1）z-index比第二個平級div（即f2）低，所以第一個div子元素（即s1）會被第二個父輩div（即f2）及其子元素（即s2）覆蓋

轉載于:https://www.cnblogs.com/dududyx/p/4881469.html

總結

以上是生活随笔為你收集整理的z-index优先级总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。