z-index和position的关系

[原创]深刻解析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，当其父元素不为relative时，其定位是相对于窗口定位；

（C）层的关系如下：

（1）兄弟元素：动态>z-index>html靠后（优先级）

定位方式不同，动态居上（图一）；

定位方式相同（同为静态或非静态），z-index大者居上；

图1：动态居上                        图2:z-index大者居上              图3:同方式和z-index，html靠后者居上

                                图4：父元素居上，子元素设置无效                                                         图5：父元素居下，子元素也可居上

  定位方式相同（同为静态或非静态），无z-index时，html靠后者居上

（2）非同辈元素，任意兄弟及其父元素均为静态定位时，html靠后者居上

（3）非同辈元素，任意兄弟或其父元素有动态定位时【重要！！！】

先比较父元素，父元素z-index高者，其子元素居上（子元素设置无效）（如图4）

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