select挡住div的5种解决方法

select挡住div的5种解决方法 (转) 

select挡住div的5种解决方法 

在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框 

以下例子系网上资源整理 

原址：http://hi.baidu.com/suofang/blog/item/72f2f7ed23f2324e78f055c4.html 

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

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


 
 
 
 
 

 
 
A Select Box is Born .... 
 

 

 
.... and a DIV can cover it up
through the help of an IFRAME. 

 
 

 

 
Click to show DIV. 

 

 
Click to hide DIV. 
 
 

第3种方法的例子：最直接的方法:隐藏下拉框. 

下面提供的是一个比较通用的一组函数: 

test.htm 

------------ 

 
 
 

 
点击让select隐藏 

 






 
 

以上这种方法,如果对于select框数目少,相对固定的话,直接用obj.style.visibility="hidden"这样进行隐藏是更直接的. 

第2种方法：用iframe作载体 

以下是一简单的例子: 

----------- 

 
 
 
 
 
 
 
 
 
 
 

 

 

中国程序员

 

sohu

 

 
 
 

第5种方法：Object对象的优先度较高,可以挡住select框 

 
hellohellohellohellotest 

这种方法虽然也简单,但对复杂的层是来说还不是好的解决方法.