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

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

在上图中，①②为一组，①为一组下来菜单，②为一个使用了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下按照我们预想的情况表现我们计划的效果。