css z-index无效

z-index无效的情况有：
（1）父标签position属性为relative;
（2）问题标签无position属性（不包括static）
（3）问题标签含有浮动(float)属性

所以这就解释了为什么parent设置了position和z-index之后grandparent的z-index就会失效的问题，

解决办法：
1、position:relative改为position:absolute；
2、浮动元素添加position属性（如relative，absolute等）；
3、去除浮动。

所以，去掉parent的position和z-index，达到了想要的效果

控制层级显示时，若父元素是position: relative; 子元素是position: absolute; 此时z-index失效，但是父元素和子元素的position属性不能动，则可以试试把z-index值设置为负值。

实例

<style type="text/css">
    .grandparent{
        position: relative;
        z-index:100;
        background: green;
        width:300px;
        height:300px;
        top:100px;
    }
    .parent{
        /*position:relative;
        z-index: 100;*/
        width:200px;
        height:200px;
        /*left:0;
        top:-50px;*/
        border:1px solid #eee;
    }
    .son1{
        position: relative;
        z-index:110;
        width:100px;
        height:100px;
        left:0;
        top:0;
        background: blue;
    }
    .son2{
        position:relative;
        z-index: 5;
        width:200px;
        height:200px;
        background: red;
        top:-100px;
        left:0;
    }
</style>
<div class="grandparent">grandparent</div>
    <div class="parent">
        <div class="son1">parent-son1</div>
        <div class="son2">parent-son2</div>
    </div>
</div>