导航栏下拉菜单被遮挡问题或者显⽰不全问题（1）当我们设置页⾯头部组件时，⼀般会固定在页⾯顶部，这样是没有问题的，但是当头部组件有下拉菜单时，问题就来了，菜单部分
会被下⾯的页⾯遮挡。这时我们想到的第⼀个办法就是z-index 增加其层级，但当下⾯的部分设置了position，那么菜单栏即使增加了层级也不会解决这种问题，那么怎么解决呢？
想要解决这种问题，就需要往头部组件和下⾯主体的的共同的⽗级上⾯，在两个都设置了position 的情况下，给头部和下⾯主题设置z-index ，如下代码：
<div ref="main" class="review_page">
<pageHeader header-title="评测"></pageHeader>
<div class="review_main"></div>
</div>
导航菜单
css：
.review_main{
padding-top: 80px;
padding-bottom: 106px;
position: relative;
z-index: 0;
}
头部组件最外层  css  部分
.headerPage{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
思路：
1、必须是同级；
2、⼆者分别设定了position:relative 或 absolute 或 fixed；
这时候通过设置z-index才有效
（2）还有⼀种情况导航下拉菜单显⽰不全是因为外层设置了overflow:hidden
很多时因为⽹页⽐较复杂，层级⽐较多，所以经常忽略了外层或者外外外层设置了overflow:hidden导致导航下拉菜单显⽰不全，其实只要仔细查就能解决问题，把overflow:hidden去掉，如果需要清除浮动，可以⽤其它⽅法，百度css清除浮动就有了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。