导航下拉菜单被遮住或显示不全问题所在和解决办法
2017-12-21 16:08
871 查看
导航下拉菜单被banner遮住/显示不全,这种问题是老生常谈了,经常有新手会问,有些人做了2、3年的还会经常犯错,而且好多人还以为是js问题,其实这是基本的css知识。我觉得还是有必要写一遍文章解释给新手们。
1、必须是同级;
2、二者分别设定了position:relative 或 absolute 或 fixed;
这时候通过设置z-index才有效
看看我们比较常见的网页布局:
html:
错误css
上面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:
例子2:
如果你的html结构这样的:
那么分别设置header和content的position和z-index,因为2者在最外层并且同级。
其它同理。
很多时因为网页比较复杂,层级比较多,所以经常忽略了外层或者外外外层设置了overflow:hidden导致导航下拉菜单显示不全,其实只要仔细查找就能解决问题,把overflow:hidden去掉,如果需要清除浮动,可以用其它方法,百度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> </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清除浮动就有了。
相关文章推荐
- 导航下拉菜单被遮住或显示不全问题所在和解决办法
- 导航下拉菜单被遮住或显示不全问题所在和解决办法【笔记】
- 二级下拉菜单被遮住,css设置z-index在ie下没作用的问题解决办法
- delphi 中 Label 中文显示不全的问题解决办法
- amCharts x轴显示不全问题的解决办法
- delphi中Label中文显示不全的问题解决办法
- Delphi下Label中文字体显示不全问题的解决办法
- 页面内容显示不全问题的解决办法
- 在用vmware安装ubuntu的时候由于分辨率问题,界面显示不全解决办法
- 关于6.0ScrollView嵌套RecyclerView高度不正确显示不全问题解决办法
- android_最简单办法解决滑动嵌套listview显示不全和滑动问题
- Win7任务管理器显示不全问题解决办法
- ScrollView中嵌套ListView时显示不全的问题解决办法
- IE8 下 select option 内容过长 , 展开时信息显示不全问题解决办法
- delphi 中 Label 中文显示不全的问题解决办法
- 在用vmware安装ubuntu的时候由于分辨率问题,界面显示不全解决办法
- Echarts 折线图y轴标签值太长时显示不全的解决办法
- myeclipse中svn图标状态不显示问题的解决办法
- Visual Studio 2008 Beta2 起始页中 不显示(Recent Projects)最近使用的项目问题,解决办法。
- Android录像后在手机文件夹不显示问题的解决办法