之前本站写过一篇”下拉导航菜单被遮住了怎么办?“,但当时只是知道这样做可以解决,问题却没有完全弄清楚。今天无意中在”大话主席“的博客里面看到这篇文章,受益匪浅,转载下,希望能帮助到更多的朋友了解此问题的原理。
导航下拉菜单被banner遮住/显示不全,这种问题是老生常谈了,经常有新手会问,有些人做了2、3年的还会经常犯错,而且好多人还以为是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> </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清除浮动就有了。
相关推荐
- 一个纯html+css的下拉导航动画效果01-24
- zblog下拉导航之:抽屉式下拉导航09-09
- zblog模板实现下拉导航功能所需的代码示范10-17
- zblog如何做下拉导航?zblogphp下拉导航菜单制作方法03-04
- 下拉导航菜单被遮住了怎么办?12-13
- 工作记录 做复杂的下拉导航08-17
欢迎 你 发表评论: 取消回复
- 最新文章
- 热文排行
- 最多评论
- 1天兴工作室官网购物活动:全场8折优惠券 不限次数不限金额04-17
- 2天兴工作室zblog纯博客主题 vue3+小程序双版本03-19
- 3vue3项目引入vant报错的错误原因和解决办法03-12
- 4天兴工作室zblog百科主题 可搭配会员插件实现知识付费盈利03-06
- 5zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 6天兴工作室2023双11活动:五折优惠券大放送11-05
- 7腾讯云2023双11活动:2H2G3M轻量服务器88一年限新用户11-05
- 8新老同享 阿里云2023双11活动:2核2G3M带宽云服务器99元/年!10-31
- 9天兴工作室zblog免登录付费阅读插件 支持支付宝微信支付虎皮椒支付10-09
- 标签聚合
- ×2zblog图片模板×1自由列表×1zblogphp伪静态×1暗色系主题×1zblogasp转zblogphp×1骗局×1导航高亮×1畅言实验室×1word-wrap×22019双11×1用户中心插件×1上传附件×1手机端视频播放×1zblogphp自适应×1js×1激励广告×1蓝色简洁模板×1授权失败×1自用主题2015版×1多彩tag
最新评论
-
天兴工作室
03-21对的,下个版本会修复 -
访客
03-20此模版多张并排图片,不管点哪张图,都显示第一张,且没有轮播按钮,只能手动关闭。 系统:win7+火狐浏览器 -
天兴工作室
01-19没听懂 你是要批量创建分类?这是插件的事情主题不会考虑的 -
访客
01-18分类一个一个设置太麻烦了。能不能在主题设置里添加对分类的设置。 -
天兴工作室
01-16没太理解你的需求,麻烦联系我们的在线qq2076496616提供订单号详细说明下需求
有 2 位网友评论:
雨夜 10年前 (2014-12-04) 回复
我喜欢 z-index:999999只要大点就好(实际是懒。。。),嘿嘿。
天兴工作室 10年前 (2014-12-05) 回复
z-index:999999... o(╯□╰)o 我设置了999幻灯片直接不见了