导航栏下拉菜单被遮挡问题或者显示不全问题

     （1） 当我们设置页面头部组件时，一般会固定在页面顶部，这样是没有问题的，但是当头部组件有下拉菜单时，问题就来了，菜单部分会被下面的页面遮挡。这时我们想到的第一个办法就是z-index 增加其层级，但当下面的部分设置了position,那么菜单栏即使增加了层级也不会解决这种问题，那么怎么解决呢？

       想要解决这种问题，就需要往头部组件和下面主体的的共同的父级上面找，在两个都设置了position 的情况下，给头部和下面主题设置z-index ，如下代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<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; }<br><br>思路：

• 1、必须是同级；
• 2、二者分别设定了position:relative 或 absolute 或 fixed；
• 这时候通过设置z-index才有效

　　

（2）还有一种情况导航下拉菜单显示不全是因为外层设置了overflow:hidden

很多时因为网页比较复杂，层级比较多，所以经常忽略了外层或者外外外层设置了overflow:hidden导致导航下拉菜单显示不全，其实只要仔细查找就能解决问题，把overflow:hidden去掉，如果需要清除浮动，可以用其它方法，百度css清除浮动就有了。