关于z-index的详细解释

对于z-index总是无法琢磨，通过简单的小栗子，一步一步的揭开它的面纱

测试的浏览器：IE，chrome

html部分：

  <div id="no-style">
       <div id="div1" class="test-div" style="background:#0c8484;">11111
           <div id="test-position" class="has-position-absolute">11111的子元素</div>
       </div>
       <div id="div2" class="test-div" style="background:#885429;">22222
       </div>
   </div>

下面是css部分，一步一步的添加属性，查看效果

1、无浮动定位，不设置z-index值
结论：子高于父

     .test-div{
            width:300px;
            height:300px;
            border:2px blue solid;
            }
    .has-position-absolute{
            width:200px;
            height:200px;
            border:2px red solid;
        }

2、设置position:absolute;二者重叠；
结论：后者高于前者；

      .test-div{
            width:300px;
            height:300px;
            border:2px blue solid;
            position:absolute;

        }
        .has-position-absolute{
            width:200px;
            height:200px;
            border:2px red solid;
        }

3、直接给div1中的子元素添加z-index:30;
结论：比较同级元素div1和div2的z-index值（没有自定义），div2后者居上；
效果图同上，依旧是div2盖住了div1(整个元素，包括它的子元素);

      .test-div{
            width:300px;
            height:300px;
            border:2px blue solid;
            position:absolute;

        }
        .has-position-absolute{
            width:200px;
            height:200px;
            border:2px red solid;
            z-index:30;
        }

4、给div1设置z-index:20;高于div2
结论：兄元素的z-index值高，则兄元素高于弟元素；

            .test-div{
            width:300px;
            height:300px;
            border:2px blue solid;
            position:absolute;

        }
        .has-position-absolute{
            width:200px;
            height:200px;
            border:2px red solid;
            z-index:30;
        }
     #div1{
            z-index:20;
        }

5、给div2也设置了z-index:25;大于div1，小于div1的子元素
结论：追溯到同级元素，即兄弟元素的比较，div2大，所以还是div2盖住div1
效果图同步骤2中的效果图，div2盖住了div1；

        .test-div{
            width:300px;
            height:300px;
            border:2px blue solid;
            position:absolute;

        }
        .has-position-absolute{
            width:200px;
            height:200px;
            position:relative;
            z-index:30;
        }
      #div1{
            z-index:20;
        }
      #div2{
            z-index:25;
        }

总结：

1、默认值：z-index在ie下默认为z-index:0;而FF下则默认为z-index:auto;
可以自己开头对全局进行设置，z-index:0;

2、正常情况下：兄弟（同级）元素后者居上，父子之间子高于父；（没有设置定位浮动的情况下）

3、对于定位元素，（不管ie还是FF）非同级关系和非父子元素关系之间的z值大小（在z轴上的值）比较，
需要回溯至其为兄弟关系的两个祖先元素上，先比较这两个元素的z-index值，只有当“兄”（前者）
的z-index大于“弟”的z-index值，“兄”的各个后代元素，才能盖过“弟”元素及其后代元素。

4、对于IE，元素的z-index默认为0，如果不另外设置“兄”，“弟”元素的z-index值，那么“兄”的
z-index就无法大于“弟”的z-index。那么“兄”元素及其子孙就无法盖过“弟”元素及其子孙。
而对于FF,元素的z-index的默认值为auto，auto自动，表示“随便，不管我的事”；那么子孙的
z值等级就只跟他们本身的z-index的值有关。