[原創]深刻解析position屬性以及與層（z-index）的關係  

1、問題的丟擲：

<ul>

<li>第一塊</li>

<li><span>第二塊</span></li>

<li>第三塊</li>

</ul>

li{width:100px; height:100px;background:Black;float:left; position:relative; z-index:1;}

li span{width:200px;height:100px;background:Red; position:absolute; top:0; left:100px; z-index:1000;}

2、問題：（1）無論span的z-index值設得多高，span永遠在li的下面

（2）將span的父元素li的z-index:2，則span馬上在li的上面

3、解析：

position的4種屬性：static靜態定位，預設值

relative、absolute、position非靜態定位

（A）absolute時，不佔據空間，可實現漂浮效果

relative時，佔據空間，即使使用left|top、margin進行移位，其原有空間始終被佔有

（B）當前元素position:absolute，當其父元素為relative時，其定位是相對於父元素定位；

當前元素position:absolute

（1）兄弟元素：動態>z-index>html靠後（優先順序）

定位方式不同，動態居上（圖一）；

定位方式相同（同為靜態或非靜態），z-index大者居上；

圖1：動態居上                        圖2:z-index大者居上              圖3:同方式和z-index，html靠後者居上

                                圖4：父元素居上，子元素設定無效圖5：父元素居下，子元素也可居上

（2）非同輩元素，任意兄弟及其父元素均為靜態定位時，html靠後者居上

（3）非同輩元素，任意兄弟或其父元素有動態定位時【重要！！！】

先比較父元素，父元素z-index高者，其子元素居上（子元素設定無效）（如圖4）

父元素居下，子元素也可以居上。（如圖5）