弹出层Div 覆盖不住select控件的解决方法

来源：互联网发布：如何关闭135和445端口编辑：程序博客网时间：2024/05/16 10:02

转载地址: http://1day.zone.ku6.com/entry/56260.html

http://www.cnblogs.com/lovko/archive/2009/04/08/1431536.html div挡住select的5种方法

弹出层Div 覆盖不住select控件的解决方法
关键字: 弹出层div 覆盖不住select控件的解决方法

-----在前加入上面的语句
虽说div直接盖不住select
但是div可以盖iframe，而iframe可以盖select,
所以，把一个iframe来当作div的底，
这个div就可以盖住select了.

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

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

第4种方法的例子：最好的方法：iframe来当作div的底

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="javascript: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>