之前本站写过一篇”下拉导航菜单被遮住了怎么办?“,但当时只是知道这样做可以解决,问题却没有完全弄清楚。今天无意中在”大话主席“的博客里面看到这篇文章,受益匪浅,转载下,希望能帮助到更多的朋友了解此问题的原理。
导航下拉菜单被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主题的暗黑模式是什么?怎么设置和使用暗黑模式?01-19
- 2zblog判断插件是否安装或者启用的代码介绍01-16
- 3translate3d和z-index冲突导致z-inde值无效的解决办法01-10
- 4zblogphp提示“ Call to undefined function openssl_pkey_get_public()”的原因和解决办法12-25
- 5zblogphp1.6版本报错“非法访问”的原因和解决办法12-23
- 6wordpress导航栏自定义添加class和rel="nofollow"的步骤12-13
- 7swiper做导航栏时自动跳转至对应分类的代码12-07
- 8zblogphp自带js框架评论接口大全12-04
- 9wordpress提示"Error establishing a database connection"的解决办法11-10
- 标签聚合
- ×1修改logo×1一排两个×12012新积分×1半年包×1灰名单×1送校园V网×1预存198元×1zbp主题×1谷歌在线字体库×1tab js×1登陆地址×1wiki×1html5模板×1售后服务×1天翼励志卡×12016年春节×1标题优化×1Gravatar头像×1zblog购买应用×1跨区服务
最新评论
-
王宁啊啊啊啊
加下我,我是王宁,之前那个号被盗了通过下验证 1239999554 刚刚聊着就被找回了 评论于:联系我们
-
中加达移民
个人买过这个网站的主题,可以付责任的说,主题很好好用。另外我不是托! -
吸料机
已经解决 -
xinling2020.com
我今天在路上还在想我的个人博客要是写到1W文章数量会不会崩,看到这几十万我就放心了。这辈子也不可能有这样的数据~!哈哈 -
访客
不知道百度**收录怎么样
有 2 位网友评论:
雨夜 6年前 (2014-12-04) 回复
我喜欢 z-index:999999只要大点就好(实际是懒。。。),嘿嘿。
天兴工作室 6年前 (2014-12-05) 回复
z-index:999999... o(╯□╰)o 我设置了999幻灯片直接不见了