嵌套标签的z-index问题
例如下列代码：
<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遮挡
请教一下，有没有方法可以解决？
展开
收起
1
条回答
写回答
写回答
-
可以考虑换个结构。或者说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;"></d2019-07-17 19:16:41赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
