层遮挡select的方法

    我们在使用层的时候，如果层是可伸缩的（类似google搜索提示框），如果下面正好有个select框，那么层会被select遮挡住。我们如何反客为主呢？

      主要方式有两种，一种是使用高度为零的iframe，使div的z-index升级，或者找出影响div显示的select，并将其隐藏。

<script language="javascript">
var ie55up = IsIE55Up();
var overIframe = null;
function DivOver(objID)
{
var obj = document.all[objID];
// 只有IE5.5以上Iframe的z-index才有效
if (ie55up)
{
if (overIframe == null)
{
overIframe = document.createElement("<iframe src='about:blank' style='position:absolute;left:0;top:0;z-index:998;display:none' scrolling='no' frameborder='0'></iframe>");
}
document.body.insertAdjacentElement("beforeEnd",overIframe);
with(overIframe.style)
{
top = obj.style.top;
left = obj.style.left;
width = obj.offsetWidth;
height = obj.offsetHeight;
display = 'block';
}
obj.style.zIndex = "999";
}
else // 隐藏被ID为objID的对象（层）遮挡的所有select
{
var sels = document.getElementsByTagName('select');
for (var i = 0; i < sels.length; i++)
 if (Obj1OverObj2(document.all[objID], sels[i]))
sels[i].style.visibility = 'hidden';
}
}

//判断obj1是否遮挡了obj2
function Obj1OverObj2(obj1, obj2)
{
 var pos1 = getPosition(obj1)
 var pos2 = getPosition(obj2)
 var result = true;
 var obj1Left = pos1.left - window.document.body.scrollLeft;
 var obj1Top = pos1.top - window.document.body.scrollTop;
 var obj1Right = obj1Left + obj1.offsetWidth;
 var obj1Bottom = obj1Top + obj1.offsetHeight;
 var obj2Left = pos2.left - window.document.body.scrollLeft;
 var obj2Top = pos2.top - window.document.body.scrollTop;
 var obj2Right = obj2Left + obj2.offsetWidth;
 var obj2Bottom = obj2Top + obj2.offsetHeight;
 
 if (obj1Right <= obj2Left || obj1Bottom <= obj2Top ||
 obj1Left >= obj2Right || obj1Top >= obj2Bottom)
 result = false;
 return result;
}

// 获取对象的坐标
function getPosition(Obj)
{
for (var sumTop=0,sumLeft=0;Obj!=window.document.body;sumTop+=Obj.offsetTop,sumLeft+=Obj.offsetLeft, Obj=Obj.offsetParent);
return {left:sumLeft,top:sumTop}
}

// 是否IE5.5以上版本
function IsIE55Up () {
var agt = navigator.userAgent.toLowerCase();
var isIE = (agt.indexOf("msie")!=-1);
if (isIE)
{
var stIEVer = agt.substring(agt.indexOf("msie ") + 5);
var verIEFull = parseFloat(stIEVer);
return verIEFull >= 5.5;
}
return false;
}

</script>

<script>
 window.onload = function(){DivOver("div1")}
</script>

<div style="position: absolute;left:10px;top:20px;width:200px;height:85px;border:1px solid red;" id="div1">
看看现在这个层下面的select不是简单的隐藏了：）
</div>
<select name="">
<option>test1</option>
<option>test2</option>
<option>test3</option>
</select>
<P />

<select name="">
<option>test1</option>
<option>test2</option>
<option>test3</option>
</select>
<P />

<select name="">
<option>test1</option>
<option>test2</option>
<option>test3</option>
</select>
<p/>