select挡住div的解决方法

在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>
</body>
</html>

 

时间: 2024-10-14 14:44:55

select挡住div的解决方法的相关文章

解决 select 挡住div的解决方法_经验交流

在div里加入下面的代码,根据需要调整就可以了 复制代码 代码如下: <iframe src="javascript:false" scrolling="no" frameborder="0" style="z-index:-1;position:absolute; top:; left:;width:;height:;"> </iframe>

开机出现reboot and select proper boot device解决方法

  开机出现reboot and select proper boot device解决方法: 开机出现reboot and select proper boot device or Insert boot media in select boot 应该是由于CMOS里面被篡改了启动顺序,变成光盘启动了,而且在光驱无盘的情况下不能自动更改回硬盘启动. 试试能不能用其他热键进入BIOS,比如F2,能进去的话就手动修改BOOT ORDER,进不去的话就很麻烦,很有可能是主板遭到病毒侵害了. 当然,不

当层遇到下拉框(select)框时的解决方法

select|解决|下拉 当层遇到下拉框时总是挡不了select框?其实这是IE的BUG,其它的浏览器没有这个问题,对于这个问题论坛里不少提出,在这里提供我的几种方法,各有各的好处,有错,有好的意见者提出,谢谢. 1.最直接的方法:隐藏下拉框. 下面提供的是一个比较通用的一组函数: test.htm ------------ <script>var HideElementTemp = new Array();//点击菜单时,调用此的函数,菜单对象function cal_hideElement

flash 挡住层的解决方法_相关技巧

出现问题: 1. 使用层制作的下拉菜单下正好有FLASH动画,菜单被动画遮挡. 2. 页面中的层浮动广告当经过FLASH动画时,浮动层从动画画穿过,实际显示被遮挡. 解决方法: 按如下任一方法设置设置FLASH对象的属性 <param name="wmode" value="transparent"> FLASH将透明 <param name="wmode" value="Opaque"> FLASH仍

Android中CSS设置select高度的bug解决方法及jq操作select

用CSS设置select的height和line-height,在有的Android版本中无效,不过可以通过添加"-webkit-appearance: listbox;"属性解决这个BUG,完整实例代码如下: .styled-select {  -webkit-appearance: listbox;  width: 100%;  font-size: 36px;  display: inline-block;  height: 80px;  line-height: 80px;  

ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)_javascript技巧

在使用ionic开发IOS系统微信的时候会有一个苦恼的问题,填写表单的时候键盘会挡住输入框,其实并不算什么大问题,只要用户输入一个字就可以立刻看见输入框了. 可惜的是,有些客户是不讲理的,他才不管这个问题,反正就是不行,所以在一天睡觉的时候突然惊醒,想出来这个方案. 我就不仔细讲代码了,直接上图 angular.module('MyApp') .directive('focusInput', ['$ionicScrollDelegate', '$window', '$timeout', '$io

ie6重复文字bug解决方法总结

在网上首先找到了好几篇相同的文章,解释的原因是注释引起的bug,但我的代码中并没有注释啊,总结了一下有一下解决方案 1.不放置注释.这是最简单.最快捷的解决方法,但不方便,有时是需要注释的: 2.注释不要放置于2个浮动的区块之间: 3.将文字区块包含在新的元素之间(这个增加了多余的元素),如在外面再加一层div: 4.去除文字区块的固定宽度,与3有相似之处: 5.在后面加一个 或者空格(这个增加了多余的元素): 6.使用IE注释格式(这个是可以使用的,不论在IE还是火狐都正常显示,而且也符合标准

html中div被select挡住各种问题总结与解决方法

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

Div Select挡住的解决办法_表单特效

<html><head>     <meta http-equiv="Content-Type" content="text/html; charset=gb2312">     <title>Div下拉菜单被Select挡住的解决办法</title> </head><body> <div style="z-index: 10; position: absolute;