现在位置:首页 » 代码修改 »

关于CSS中修复网页各层相互遮挡的终极解决方案

心岛发布于2014年08月01日  分类: 代码修改  浏览:3147 人次  评论:8 

前几天在折腾模板时发现:导航栏的下拉菜单老是被幻灯片的图片遮挡了,设置了z-index:9999都不管用,达人给出的答案是:由于顶层层级不高,所以嵌套在里面的子层即使设置为最高也依然会被顶层较高的层所遮蔽。解决思路,将涉及遮挡的两个层的顶层调整下叠加顺序,然后让子层显示出来。

02.jpg01.jpg

 

上图中的大体结构如下:

<div id="header">导航栏</div>

<div id="wrap">内容模块</div>

由于导航栏的顶层层级较低,所以全部将两个顶层统一调整下位置的优先级:position:relative; //均设为相对位置后再设置顶层的z-index属性,就可以轻松解决这个问题了!

本文由心岛原创或编辑,转载请保留链接【关于CSS中修复网页各层相互遮挡的终极解决方案】http://www.liangxin.name/?post=574
本文标签: Css兼容 代码修改 方法 技巧
上一篇: 关于emlog手机模板导航调用分类栏目的方法
下一篇:ACDSEE一次性批量修改N个文件夹下图片大小的技巧
目前有 8 条评论
avatar
火锅 2015-06-25 17:37回复
真心佩服博主了。
avatar
该昵称已屏蔽 2015-05-07 13:33回复
好文,谢谢博主分享!{smile:4}
avatar
该昵称已屏蔽 2015-05-07 09:46回复
支持博主
avatar
该昵称已屏蔽 2015-04-22 22:13回复
学习啦,学楼主啦!
avatar
歌词找歌名 2014-10-06 15:40回复
博主码字辛苦了,支持个。
avatar
红博客 2014-09-14 22:00回复
我自己维护和修改自己网站的模板,CSS确实很重要,不懂的直接网上搜索答案,自己摸索,感谢博主的分享。
avatar
该昵称已屏蔽 2014-09-10 09:38回复
技术活   羡慕博主
avatar
斑马印头回收 2014-08-15 14:37回复
很值得学习哈