一、导航下拉菜单被遮住,那是因为层叠关系错误
我们必须理解层叠关系满足的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>
</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在同一级(满足条件1),
这时候同时设置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; }
例子2:
如果你的html结构这样的:
<div class="header">
<div class="nav">
<ul class="mNav">
这是下拉菜单
.........
</ul>
</div>
</div>
<!-- content -->
<div class="content">
<div class="banner">
<div class="slider">这是焦点图....</div>
</div>
</div>
那么分别设置header和content的position和z-index,因为2者在最外层并且同级。
其它同理。
二、导航下拉菜单显示不全是因为外层设置了overflow:hidden
很多时因为网页比较复杂,层级比较多,所以经常忽略了外层或者外外外层设置了overflow:hidden导致导航下拉菜单显示不全,其实只要仔细查找就能解决问题,把overflow:hidden去掉,如果需要清除浮动,可以用其它方法,百度css清除浮动就有了。
转载:https://blog.csdn.net/FireBird_one/article/details/78864929