元素在页面上有高度，设置了很高的z-index,但是仍然显示不出来

Question

1..header用了fixed定位，也是左右浮动，左边logo,右边nav
nav分左右浮动，都用的overflow:hidden清除浮动，里面的的li用的display:inline-block,每个一级菜单li用了relative定位，二级菜单用的absolute定位，但是现在二级菜单明明有宽度和高度，层级也很高，但是就是图中这样，二级菜单一直只显示一点点，
2.之后我把header中的overflow删掉，它又出来了，我不太明白，我的二级菜单式absolute的，跟overflow有关系吗？

Answer 1

overflow: hidden会把非内容区域范围里的东西全部隐藏。你这个二级菜单在header里，由于position: absolute的元素是不属于HTML元素布局流的，也就是说这个元素不会占据和扩充元素位置，所以header的区域如下：

所以不在header内容区内的二级菜单会被隐藏。

Update:
对于脱离元素布局流的解释图：

Answer 2

给.childnav设置position：relative。z-index只能用在static之外的元素

Answer 3

overflow hidden 隐藏了吧！

Answer 4

页面上的自然层级是代码越靠上层级越低，你可以理解为往桌子上一张张的放纸，按照代码上的顺序来放的话，先放的在最下边，自然就被后放的遮住了，网页渲染亦是如此。z-index则是只在同级间有效，如果是父容器内的元素和子容器内的元素，本身不在同一个层级上下文里渲染，是看不出效果的。

Answer 5

overflow:hidden;是溢出隐藏，跟清楚浮动没什么关系。li设置overflow:hidden了，自然二级菜单也看不到了！

只要li里面的元素超过了红框的这一块区域，就看不到了与z-index无关，除非把overflow:hidden去掉。你做二级菜单，没必要对li设置overflow:hidden啊，二级菜单的ul设置display:none;当鼠标放到li下面时，li下的二级菜单的ul设置display:block;就可以正常使用了！