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了.
<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 name="D1">
<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;" name="I1">
</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>
第3種方法的例子：最直接的方法:隱藏下拉清單. 下面提供的是一個比較通用的一組函數: test.htm ------------
<script>
var HideElementTemp = new Array();
//點擊功能表時，調用此的函數,功能表物件
function cal_hideElementAll(obj){
cal_HideElement("IMG",obj);
cal_HideElement("SELECT",obj);
cal_HideElement("OBJECT",obj);
cal_HideElement("IFRAME",obj);
}
function cal_HideElement(strElementTagName,obj){
try{
var showDivElement = obj;
var calendarDiv = obj;
var intDivLeft = cal_GetOffsetLeft(showDivElement);
var intDivTop = cal_GetOffsetTop(showDivElement);//+showDivElement.offsetHeight;
//HideElementTemp=new Array()
for(i=0;i<window.document.all.tags(strElementTagName).length; i++){
var objTemp = window.document.all.tags(strElementTagName)[i];
if(!objTemp||!objTemp.offsetParent)
continue;
var intObjLeft=cal_GetOffsetLeft(objTemp);
var intObjTop=cal_GetOffsetTop(objTemp);
if(((intObjLeft+objTemp.clientWidth)>intDivLeft)&&
(intObjLeft<intDivLeft+calendarDiv.style.posWidth)&&
(intObjTop+objTemp.clientHeight>intDivTop)&&
(intObjTop<intDivTop+calendarDiv.style.posHeight)){
//var intTempIndex=HideElementTemp.length;//已經有的長度
//save elementTagName is stutas
//HideElementTemp[intTempIndex]=new Array(objTemp,objTemp.style.visibility);
HideElementTemp[HideElementTemp.length]=objTemp
objTemp.style.visibility="hidden";
}
}
}catch(e){alert(e.message)
}
}
function cal_ShowElement(){
var i;
for(i=0;i<HideElementTemp.length; i++){
var objTemp = HideElementTemp[i]
if(!objTemp||!objTemp.offsetParent)
continue;
objTemp.style.visibility=''
}
HideElementTemp=new Array();
}
function cal_GetOffsetLeft(src){
var set=0;
if(src && src.name!="divMain"){
if (src.offsetParent){
set+=src.offsetLeft+cal_GetOffsetLeft(src.offsetParent);
}
if(src.tagName.toUpperCase()!="BODY"){
var x=parseInt(src.scrollLeft,10);
if(!isNaN(x))
set-=x;
}
}
return set;
}
function cal_GetOffsetTop(src){
var set=0;
if(src && src.name!="divMain"){
if (src.offsetParent){
set+=src.offsetTop+cal_GetOffsetTop(src.offsetParent);
}
if(src.tagName.toUpperCase()!="BODY"){
var y=parseInt(src.scrollTop,10);
if(!isNaN(y))
set-=y;
}
}
return set;
}
</script>
<select name="D2"></select>
<select name="D3"></select>
<div style="position:absolute;left:0;top:0;width:100;height:100;background-color:red" onclick="cal_hideElementAll(this)">
點擊讓select隱藏
</div>
<br><br><br><br><br><br>
<input type="button" value="點擊讓select顯示" onclick="cal_ShowElement()">
以上這種方法,如果對於select框數目少,相對固定的話,直接用obj.style.visibility="hidden"這樣進行隱藏是更直接的.
第2種方法：用iframe作載體 以下是一簡單的例子: -----------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>簡單功能表</title>
<!--
提供定位函数，用iframe作载体，不会被select挡住
By Fason(2003-5-21)
-->
<style id=s10>
#div1{
position:absolute;
z-index:100;
width:100;
height:130;
background-color:#d2e8ff;
border:1 solid black;
}
div{cursor:hand;font-size:12px;}
a{text-decoration:none;color:red;font-size:12px}
</style>
</head>
<body>
<script>
function window.onload(){
var shtml=div1.innerHTML;
var ifm=document.createElement("<iframe frameborder=0 marginheight=0 marginwidth=0 hspace=0 vspace=0 scrolling=no></iframe>")
ifm.style.width=div1.offsetWidth
ifm.style.height=div1.offsetHeight
ifm.name=ifm.uniqueID
div1.innerHTML=""
div1.appendChild(ifm)
window.frames[ifm.name].document.write(s.outerHTML+"<body leftmargin=0 topmargin=0>"+shtml+"</body>")
}
function show(){
with(document.all.img1){
x=offsetLeft;
y=offsetTop;
objParent=offsetParent;
while(objParent.tagName.toUpperCase()!= "BODY"){
x+=objParent.offsetLeft;
y+=objParent.offsetTop;
objParent = objParent.offsetParent;
}
y+=offsetHeight-1
}
with(document.all.div1.style){
pixelLeft=x
pixelTop=y
visibility=''
}
}
function hide(){
document.all.div1.style.visibility='hidden'
}
</script>
<img id=img1 onmouseover="show()" onmouseout="hide()" src="ie.gif"><br>
<select name="D4"></select>
<div id=div1 onmouseover="style.visibility=''" onmouseout="style.visibility='hidden'" style="visibility:hidden;">
<div href="http://www.csdn.net" onmouseover="style.backgroundColor='highlight'" onmouseout="style.backgroundColor=''" onclick="window.open(href)">
中國程式師</div>
<div href="http://www.sohu.com" onmouseover="style.backgroundColor='highlight'" onmouseout="style.backgroundColor=''" onclick="window.open(href)">
sohu</div>
</div>
</body>
</html>
第5種方法：Object物件的優先度較高,可以擋住select框
<OBJECT id=aa style="display:none;z-index:1000; position:absolute; top:0; left:0; width:152; height: 200;" type="text/x-scriptlet" data="about:<body><div style='position:absolute;left:0;top:0;width:152;height:200;font:14;color:white;background:black;border:1 solid black'>test</div>"></OBJECT>
<select name="D5"><option>hellohellohellohello</select><button onclick=aa.style.display=aa.style.display=="none"?"":"none">
test</button>
這種方法雖然也簡單,但對複雜的層是來說還不是好的解決方法.