嵌套标签的z-index问题

Question

例如下列代码：
<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遮挡

请教一下，有没有方法可以解决？

Answer 1

可以考虑换个结构。或者说nav不设置z-index，只是设置position为非static，然后你里边的category设置的z-index比bg的要大就好了。

上边的你的失效是因为当z-index设置了整数的值的时候，就会创新新的层叠上下文，然后不管他的孩子设置z-index多高，都会受他控制。

html    <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>

可见http://blog.aijc.net/css/2014/08/06/CSS%20%E5%8F%AF%E8%A7%86%E5%8C%96%E6%A0%BC%E5%BC%8F%E6%A8%A1%E5%9E%8B%EF%BC%88Visual%20formatting%20model%EF%BC%89/ 关于z-index部分

Answer 2

父子、兄弟元素的z-index问题
http://www.cnblogs.com/dolphinX/p/3262469.html
这篇文章有比较全面的总结

Answer 3

嵌套元素，z-index遵循祖先优先的原则。nav不设置z-index即可