z-index的应用

z-index 也许用得少，但到需要的时候就会纠结各种问题。

z-index要配合定位来用：

   1. 静态定位：position:static（为position属性的默认值）。
   2. 动态定位：position:relative或position:absolute或position:fixed。

1，无 z-index设置时，html元素靠后者居上。

    如： <div1></div>

             <div2 style="margin-top:-50px;">此层显示居上!!</div>

2，同辈级时动态定位着居上。

    

    如： <div1 style="position:static"></div>

             <div2 style="margin-top:-50px;position:relative">此层显示居上!!</div>

 

3，同为动态定位时z-index值大者居上。

         如： <div1 style="position:relative; z-index:2">此层显示居上!</div>

                 <div2 style="margin-top:-50px;position:relative;z-index:1"></div>

4，动态定位时，子级无论z-index多大，父级居上。

 

            如：<div1 style="position:relative; z-index:2"> 此层显示居上！！ </div>

                 <div2 style="position:relative;z-index:1">

                        <p style="margin-top:-50px;position:relative;z-index:999"> ！·#！#·#￥￥</p>

                 </div>