使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>


 

解决DIV层被OBJECT、SELECT控件遮盖问题

浮动层或便捷菜单给用户操作极大的便利。使用IE6、7时,SELECT控件不能被DIV遮盖。OBJECT控件也不能被DIV遮盖。究其原因,大多表单控件或HTML控件是使用浏览器本身渲染绘制,因此层次可以...
  • testcs_dn
  • testcs_dn
  • 2014年03月17日 15:28
  • 6763

div被select下拉框挡住了--5种解决方法

在IE中,select属于window类型控件,它会“挡住”所有非window类型控件可以这么理解,div这样的组件是在浏览器客户区使用代码“渲染”的,他们被渲染在客户区的绘画表面上,而select是...
  • xinxin19881112
  • xinxin19881112
  • 2009年12月31日 23:01
  • 8218

SELECT 元素在IE6中遮挡DIV的解决方法

解决IE6 select 遮挡div的bug 在最近的一个项目中,遇到了IE6 select遮挡div的bug,为了解决这个bug我查了很多资料,试图找到一个最最有效的方法,很多人是通过...
  • zhangkang0324
  • zhangkang0324
  • 2014年02月10日 09:47
  • 778

彻底解决 iframe 挡住层 DIV

把原来在IFRAME中的DIV放到它的父页面,这样在IFRAME中弹出父页IFRAME面的DIV就不会被其他IFRAME挡住了来自:http://www.cnblogs.com/willpower/a...
  • getdate
  • getdate
  • 2011年03月14日 16:52
  • 7205

Html点击按钮上下逐条滚动,外层div不遮挡内层div内容

div中内容上下按条滚动,并且外层不遮挡紧挨底层的内容。
  • sq_better
  • sq_better
  • 2016年04月04日 20:18
  • 877

网页下拉菜单被flash动画遮住

我们在网页中插入flash时,通常使用下面的代码: object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" code...
  • dyllove98
  • dyllove98
  • 2013年05月22日 20:35
  • 1766

select覆盖div的解决方案

-----在前加入上面的语句虽说div直接盖不住select但是div可以盖iframe,而iframe可以盖select,所以,把一个iframe来当作div的底,这个div就可以盖住select了...
  • daryl715
  • daryl715
  • 2008年04月18日 00:09
  • 1254

二级菜单ie中被下面的div遮挡解决问题

这个很可能是误设置了position属性,如POSITION: relative;解决这个办法在当前层设置z-index都是无效的,即使将弹出层所在父层的z-index设置到999,可弹出层依然会...
  • kai_wei
  • kai_wei
  • 2016年03月02日 18:32
  • 854

Android软键盘的全面解析,让你不再怕控件被遮盖

本文出自博客Vander丶CSDN博客,如需转载请标明出处,尊重原创谢谢 博客地址:http://blog.csdn.net/l540675759/article/details/74528641背...
  • l540675759
  • l540675759
  • 2017年07月10日 11:50
  • 8227

Div被Select挡住解决办法

Div被Select挡住解决办法         Div下拉菜单被Select挡住的解决办法     onmouseover="this.style.height=100;" onmou...
  • fengjunoo
  • fengjunoo
  • 2016年06月11日 14:40
  • 394
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使DIV不被select等控件遮挡的解决办法
举报原因:
原因补充:

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