导航下拉菜单被遮住或显示不全

  • 内容
  • 相关

        导航下拉菜单被banner遮住/显示不全,这种问题是老生常谈了,经常有朋友问,有些人做了几年的还会经常犯错,而且好多人还以为是js问题,其实这是基本的css知识。

导航下拉菜单被遮住,那是因为层叠关系错误,我们必须理解层叠关系满足的2个条件:

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

看看我们比较常见的网页布局:

html:

<!-- 头部 -->
<div class="header">
 
    <div class="nav">
        <ul class="mNav">
            这是下拉菜单
            .........
        </ul>
    </div>
 
</div>
 
<!-- banner -->
<div class="banner">
    <div class="slider">这是焦点图....</div>

错误css

.header{ }
.header .nav{ z-index:9999; height:50px; color:#fff; text-align:center;  }
.banner{ position:relative; margin:10px auto; height:300px; }

上面css里吧nav的z-index设置成9999,但发现下拉还是被挡住,这是因为此时banner设置了position,会在nav上面;

想要nav在banner上面,就需要向上查找,发现nav的外层(header)和banner在同一级;

这时候同时设置header和banner的position和z-index,使header在banner上面即可,此时nav的z-index已经无关重要了。

正确css:

.header{ position:relative; z-index:1 }
.header .nav{  height:50px; color:#fff; text-align:center; }
.banner{ position:relative; z-index:0; margin:10px auto; height:300px; }
您阅读这篇文章共花了: 

本文标签:

版权声明:转载请带上版权原创为《辛诚

解压密码:若设有密码均为:www.xcooo.cn

收录状态:百度已收录点击查看详情

导航下拉菜单被遮住或显示不全

发表评论

您可以选择匿名评论,保护个人隐私 !