z-index優先順序總結，z-index優先順序

z-index優先順序總結，z-index優先順序

因為顯示器顯示的圖案是一個二維平面，擁有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> position:relative;top:-50px;"><div>

                 --------------------------------------------------------------------------------------------------- 2. 粉色div設定z-index為-5時，如。（註：粉色div已設定position : relative ，故z-index可生效 ） <div>position:relative;top:-50px; z-index:-5;"><div> 
                             --------------------------------------------------------------------------------------------------- 3. 黃色div設定z-index為30，粉色為25時，30>25，結果如。 <div>z-index:30;"></div>

<div>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>position:relative;z-index:1;"></div><div>position:relative;top:-50px; z-index:1;"><div>                 2. 如果兩個元素都沒有設定z-index，使用預設值，一個定位一個沒有定位，那麼定位元素覆蓋未定位元素 <div>position:relative;top:50px;"></div><div>position:relative;z-index:10;">　　<div>position:relative;z-index:-5;"><div></div>                               --------------------------------------------------------------------------------------------------- 2. 如果父元素z-index失效（未定位或者使用預設值），那麼定位子項目的z-index設定生效             <div>position:relative;">　　<div>position:relative;z-index:-5;"><div></div>                      ---------------------------------------------------------------------------------------------------

兄弟子項目z-index關係處理：

如果兄弟元素的z-index生效，那麼其子項目覆蓋關係有父元素決定 <div>position:relative;z-index:5;">　　<div>position:relative;z-index:50;"></div></div>

<div>position:relative;z-index:10;">

　　<div>position:relative;z-index:-10;"></div>

</div>

                

 

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