天兴工作室:提供zblog模板 emlog模板 dedecms模板的下载和仿站定制 | RSS订阅 | 网站地图 | 联系我们
天兴工作室自用主题2015版上架销售
当前位置:网站首页 教程 正文
内容加载中......

之前本站写过一篇”下拉导航菜单被遮住了怎么办?“,但当时只是知道这样做可以解决,问题却没有完全弄清楚。今天无意中在”大话主席“的博客里面看到这篇文章,受益匪浅,转载下,希望能帮助到更多的朋友了解此问题的原理。

导航下拉菜单被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清除浮动就有了。

原文地址:http://www.superslide2.com/blog/?p=102

我要提问 如果你对于此文还有任何疑问欢迎在文章下面的评论区域留言,如果你的疑问比较多,欢迎在本站的在线提问专业去发布问题,点击右侧的我要提问即可到达。天兴工作室将尽我所能为你解答问题。

本文标签下拉导航 幻灯片

本文地址http://www.txcstx.cn/post/712.html

版权说明:如非注明,本站文章均为 天兴工作室 原创,转载请注明出处和附带本文链接。

哈哈,本文已有 2 位小伙伴发表了看法:

1#雨夜 (游客)  评论于 2014-12-04 22:26:57回应ta
我喜欢 z-index:999999只要大点就好(实际是懒。。。),嘿嘿。
1#天兴工作室 (游客)  评论于 2014-12-05 09:52:40回应ta
z-index:999999... o(╯□╰)o 我设置了999幻灯片直接不见了

欢迎 发表评论

必填

选填

选填

必填

◎欢迎在这里交流反馈,垃圾评论会秒删的额...

联系我们
最新评论
标签云
老家后台密码删除版权cms模板合家欢评论无限嵌套视觉差木马手机端主题短信密友tab切换存话费送礼品中国多说github华录s3500电信WiFizblogcms主题单篇文章调用无线原油交易模板话费流量充值包注册会员zblog最新版本验证码易通卡乐视云视频zblog回到顶部上网卡222心情预付费霉气a520保健品
热门模板