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

您所在的位置:网站首页 vuesax的navbar被遮挡 导航栏下拉菜单被遮挡问题或者显示不全问题

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

2023-03-29 18:29| 来源: 网络整理| 查看: 265

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

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

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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3