首页 > 代码修改 > 关于CSS中修复网页各层相互遮挡的终极解决方案
2014
08-01

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

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

关于CSS中修复网页各层相互遮挡的终极解决方案 - 第1张  | 心岛博客关于CSS中修复网页各层相互遮挡的终极解决方案 - 第2张  | 心岛博客

 

上图中的大体结构如下:

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

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

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

最后编辑:
作者:xindao
这个作者貌似有点懒,什么都没有留下。

关于CSS中修复网页各层相互遮挡的终极解决方案》有 16 条评论

留下一个回复

你的email不会被公开。