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前端工程师小程序开发的笔试题