例如下列代码:
<nav>
<div id="name"></div>
<div id="category"></div>
</nav>
<div id="bg"></div>
其中,设置nav的z-index为700,设置黑色背景#bg的z-index为800
因为响应式设计,在小屏幕上,就会有:
category {
position:fixed;
top:0;
left:0;
z-index:900
}
希望的效果是#bg会遮挡nav,但#category会浮在#bg之上
实际测试中,发现#category还是会被#bg遮挡
请教一下,有没有方法可以解决?
可以考虑换个结构。或者说nav不设置z-index,只是设置position为非static,然后你里边的category设置的z-index比bg的要大就好了。
上边的你的失效是因为当z-index设置了整数的值的时候,就会创新新的层叠上下文,然后不管他的孩子设置z-index多高,都会受他控制。
<div style="position: absolute;width: 100px;height: 100px;background: red;">
<div style="position: fixed;width: 50px;height: 50px;background: blue;z-index: 10;"></div>
</div>
<div style="position: absolute;width: 200px;height: 200px;background: rgba(0,0,0,.4);z-index: 5;"></div>
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。