[导入]层遮挡的问题

在我们做动态层的时候，IE6以下很多时候碰到的难题就是层不能正确的遮挡后面的下拉列表（在IE7中，这个鸟毛病已经解决了）。拙劣的做法是当层显示的时候，将页面中所有的下拉列表对象hide起来，然后当层隐藏之后再显示出来。

网上放出了两种做法。第一种是添加一个和层大小相同的IFrame即可，第二种就是我提到的方法的一个实现，分别贴出代码

if(div.children &&div.children.length)
    {
      //为了将下层的东东屏蔽，需要添加一个IFrame，这个IFrame透明则不会对层有任何影响
      var last=div.children[div.children.length-1];
      if(null==last||last.tagName.toLowerCase()!="iframe")
      {
        last=document.createElement("<IFRAME src=\"javascript:false\""+
          " style=\"position:absolute; visibility:inherit;top:0px;left:0px;"+
          "filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';z-index:-1;width:100%;height:100%;\""+
          " frameborder='1'>");
        div.appendChild(last);
      }
      last.style.height=div.clientHeight;
    }

这里使用IE的Css filter，直接将IFrame设置成全透明，这样不会对层产生任何副作用。
后面帖的是另外的实现方式，代码不是我写的，呵呵，摘抄自园子里面 http://www.cnblogs.com/joejoe/archive/2007/07/24/829111.html

<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>test1test1test1test1test1test1test1test1test1test1test1test1test1test1</option>
 <option>test2</option>
 <option>test3</option>
</select>
<P />


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

文章来源:http://www.loveayang.com.cn/post/2007/11/层遮挡的问题.aspx