Div遮盖Select选择框代码 - ┣◇网站建设&Web语言 - ╋艺镇╋

Div经常用来做浮动窗口，用过的人基本上都会碰到一个问题，那就是div不能遮盖底层的select选择框，网上主要是两种解决办法，一种是在显示div的同时将选择框隐藏，这种方式计算div以及select的位置时很繁杂，如果有多个选择框需要处理则会更痛苦，另一种比较好的解决方式是把一个与div大小、位置相同的iframe夹在底层页面和div之间，这种解决方案网上有很多代码，这里转载一份不错的实现。
原文见http://www.cnblogs.com/gengxiaoc ... 7/12/01/979092.html
<html>
<head>
<script>
function DivSetVisible(state)
{
      var DivRef = document.getElementById('PopupDiv');
      var IfrRef = document.getElementById('DivShim');
      if (state)
      {
         DivRef.style.display = "block";
         IfrRef.style.width = DivRef.offsetWidth;
         IfrRef.style.height = DivRef.offsetHeight;
         IfrRef.style.top = DivRef.style.top;
         IfrRef.style.left = DivRef.style.left;
         IfrRef.style.zIndex = DivRef.style.zIndex - 1;
         IfrRef.style.display = "block";
      }
      else
      {
         DivRef.style.display = "none";
         IfrRef.style.display = "none";
      }
}
</script>
</head>
<body>
      <form>
         <select>
            <option>A Select Box is Born ....</option>
         </select>
      </form>
      <div id="PopupDiv" style="position:absolute; top:25px; left:50px; padding:4px; display:none; background-color:#000000; color:#ffffff; z-index:100">
      .... and a DIV can cover it up<br/>through the help of an IFRAME.
      </div>
      <iframe id="DivShim" src="javascript:false;" scrolling="no" frameborder="0" style="position:absolute; top:0px; left:0px; display:none;">
      </iframe>
      <br/>
      <br/>
      <a href="#" >Click to show DIV.</a>
      <br/>
      <br/>
      <a href="#" >Click to hide DIV.</a>
</body>
</html>

主题：Div遮盖Select选择框代码