使DIV不被select等控件遮挡的解决办法

转载 2007年09月15日 09:43:00

    在IE中,select属于window类型控件,它会“挡住”所有非window类型控件
可以这么理解,div这样的组件是在浏览器客户区使用代码“渲染”的,
他们被渲染在客户区的绘画表面上,
而select是使用的标准windows控件,只是作为客户区的子控件放置而已,
它会覆盖所有客户区绘画表面上“画”出来的一切,但不一定会覆盖其他类型的window控件,
比如iframe和其他的select,如果你使用过类似Delphi这样的环境就会自然理解。

有4种办法;
1. 修改select,不用标准select,而是自己用其他html元素模拟
2. 修改你的div,使用iframe。
3. 在div被显示的时候或者到达select所在位置时隐藏select
4. 在div中或div的同一坐标上,用相同尺寸的iframe先遮挡一下,然后在iframe上显示div的内容。

第4种方法的例子:

<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/>
<href="#" onclick="DivSetVisible(true)">Click to show DIV.</a>
<br/>
<br/>
<href="#" onclick="DivSetVisible(false)">Click to hide DIV.</a>
</body>
</html>


 

相关文章推荐

ie6下select覆盖div的解决办法

  • 2011年12月24日 09:20
  • 56KB
  • 下载

IE6 Select元素无法被div等元素覆盖的bug解决办法

在页面设计时,经常会使用div制作蒙版或模拟弹出窗口,但在IE6下,当div下方有下拉列表框select元素的时候,下拉列表框会划破div显示在div之上,不论z-index设为何值均会出现此问题,可...

不被select选择框遮挡的div层 (可拖动)-- 2007-12-21的博客搬家

http://www.w3.org/TR/html4/loose.dtd"> 不被select遮挡的层  //var isSupportDOM = !!document.getElementB...

自绘的子控件,在窗口被遮挡后不复原 解决办法

今天遇到的问题,如题,研究了很久没有得到解决,还发帖咨询了,这儿:http://topic.csdn.net/u/20110306/00/06ce2f1c-e48e-46ba-9578-cbae142...

select项内容过长解决办法

  • 2010年04月20日 14:46
  • 2KB
  • 下载

ie下select遮挡住绝对定位层的bug和解决办法

鼠标滑过text文本框时,弹出提示信息DIV。弹出的DIV层被Select下拉框遮住。 解决方法之一:Iframe包裹select元素 使用iframe包住select,这样ifram...

ie6弹出框被select遮住解决办法

  • 2010年12月23日 14:49
  • 2KB
  • 下载

Chrome/Firefox等提示“安全证书不被信任”解决办法

使用GoAgent等软件时,在Chrome/Firefox等浏览器浏览时,会出现“您尝试访问的是 www.youtube.com,但服务器出示的证书是由您计算机的操作系统不信任的实体所颁发。这可能表明...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使DIV不被select等控件遮挡的解决办法
举报原因:
原因补充:

(最多只允许输入30个字)