select挡住div的解决方法

时间:2013-04-21 22:10:02  来源:第二电脑网  作者:第二电脑网

  第二电脑网导读:div这样的组件是在浏览器客户区使用代码“渲染”的, 他们被渲染在客户区的绘画表面上, 而select是使用的标准windows控件,只是作为客户区的子控件放置而已, 它会覆盖所有客户区绘画表面上“画”出来的一切,但不一定会覆盖其他类型的window控件, 比如iframe和其他的select,如果你使用过类似Delphi这样的环境就会自然理解。IE7解决了此...
  正文:IE6中弹出DIV被底层的SELECT控件划破,无论怎样设置Z-Index属性都不行。 有多种种办法; 1. 修改select,不用标准select,而是自己用其他html元素模拟

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

在开发过程中,你可能会遇到下面这个问题。

IE6中弹出DIV被底层的SELECT控件划破,无论怎样设置Z-Index属性都不行。

解决前为

网上说了很多种方法,现在我给大家介绍一种简单的解决方案。

在弹出DIV内添加IFRAME控件,如下:

 

<iframe style="position:absolute; z-index:-1;" frameborder="0" src="about:blank"></iframe>

其中属性重点部分是红色部分,Frameborder是为了控制布局的。绿色部分可要可不要。

解决后为

该方法原理是SELECT和IFRAME为WINDOW。而DIV是遮挡不住SELECT控件的,但是DIV可以遮挡住IFRAME控件,而且IFRAME控件可以遮挡住SELECT,所以,如果IFRAME在DIV底部的话,就可以让DIV遮挡住SELECT控件了

Div被Select挡住,是一个比较常见的问题。  
      有的朋友通过把div的内容放入iframe或object里来解决。  
      可惜这样会破坏页面的结构,互动性不大好。  
   
      这里采用的方法是:  
   
      虽说div直接盖不住select  
      但是div可以盖iframe,而iframe可以盖select,  
      所以,把一个iframe来当作div的底,  
      这个div就可以盖住select了.  

 

<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="网页特效:false;" scrolling="no" frameborder="0" style="position:absolute; top:0px; left:0px; display:none;">
</iframe>
<br/>
<br/>
<a href="#" onclick="DivSetVisible(true)">Click to show DIV.</a>
<br/>
<br/>
<a href="#" onclick="DivSetVisible(false)">Click to hide DIV.</a> "select挡住div的解决方法"由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Programming/JavaScript/25880.html


关于《select挡住div的解决方法》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td