乌徒帮技术范儿技术中心CSS样式表 › IE6/7下绝对定位层被遮住原因及其解决办法

IE6/7下绝对定位层被遮住原因及其解决办法

分类:CSS样式表

在网站开发中,我们经常会遇到低版本浏览器效果不如意的情况,特别是IE6/7下,很多css效果无法实现,虽然它们已经在浏览器的领域落后,但是目前市场上仍然有很多电脑上使用IE6/7,因此又不得不想办法解决这些问题。今天遇到的问题更为棘手,在IE6/7下,使用position:absolute对元素进行定位后,可能被下面的元素遮住,即使对其使用z-index属性,仍然无法避免,如下图:

IE67下绝对定位层被遮住原因及其解决办法

在上图中,①②为一组,①为一组下来菜单,②为一个使用了position属性的区块,在下拉菜单动作触发后,发现下拉部分的底部竟然被下面的黄色区域遮住。

③④为一组,这个区域内有四个相同属性的区块,当鼠标移动到其中一个区块上时,它向自己的右侧展开一部分被隐藏的内容,这部分被隐藏的内容原本用position:absolute来实现,但是现在展开部分竟然被遮住了。

在IE6/7下产生这个现象的原因是IE低版本浏览器对position规则更为挑剔,当我们在使用position:absolute时,其效果是在其父元素(父级或更高级)的position:relative属性基础上,如果父级元素没有position:relative属性,就基于根父级,直至body。在相对高级的浏览器中,对position:absolute元素增加z-index可以规定其所在的层,但在IE6/7中,我们回过头来必须理解,position:absolute的z-index只是在父级position:relative元素中进行层次排序,position:relative也是有层次的,如果①层在②层下面,即使下拉层的层次更高,但由于其父元素的层次比②层低,因此下拉层也会被遮住。要解决的办法很简单,让①层的层次高于②层。用代码解释如下:

?<ul id="nav">
?? ?<li>菜单一</li>
?? ?<li>下拉菜单
?? ?<ul>
?? ??? ?<li>子菜单一</li>
?? ??? ?<li>子菜单二</li>
?? ?</ul>
?? ?<li>菜单二</li>
</ul>
<div id="flash"></div>

css部分则这么写

#nav{position:relative;z-index:2;}
#nav .dropmenu{positiion:absolute;top:100%;left:0;z-index:99;}
#flash{position:relative;z-index:1;}

③的情况稍微特殊,相同的一个区块列表我们一般没法对每一个元素进行z-index规定,这样即使这些区块的z-index相同,它们内部position:absolute显示的部分也会被遮住,只有当鼠标放上去的那个position:relative区块z-index大于其他相邻区块的时候,才能实现,因此我们最好使用脚本来增加这个动作,否则在IE6下根本无法实现。

例如:

<li>
<div class="visible"></div>
<div class="hidden"></div>
</li>
<li>
<div class="visible"></div>
<div class="hidden"></div>
</li>
<li>
<div class="visible"></div>
<div class="hidden"></div>
</li>
<li>
<div class="visible"></div>
<div class="hidden"></div>
</li>

css如下写(宽度背景的样式省略):

li{position:relative;z-index:0;}
li .hidden{display:none;position:absolute;top:0;left:100%;}
li.current{z-index:1;}

js(jquery)如下写(只是鼠标动作):

jQuery(function($){
	$('li').hover(function(){
		$(this).addClass('current');
	},function{
		$(this).removeClass('current');
	});
});

这样一来,即可让position:absolute和position:relative的层次得到清晰的规定,在IE6/7下按照我们预想的情况表现我们计划的效果。

已有2条评论 快速评论
  1. 补肾壮阳的食物 #3042楼 2013/02/25 21:24:22 回复

    解决成功了 很感谢

  2. iphone手机壳 #3039楼 2013/02/23 17:11:47 回复

    谢谢博主分享 学习到了

填写个人信息,赶快回复吧!