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>
智一面提供超多的web前端工程师小程序开发的笔试题
