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

时间：2024-03-07 21:26:38

     （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清除浮动就有了。

相关文章