select挡住div的5种解决方法
http://www.blogjava.net/fine/archive/2007/08/07/134941.html
在IE中,select属于window类型控件,它会“挡住”所有非window类型控件 可以这么理解,div这样的组件是在浏览器客户区使用代码“渲染”的, 他们被渲染在客户区的绘画表面上, 而select是使用的标准windows控件,只是作为客户区的子控件放置而已, 它会覆盖所有客户区绘画表面上“画”出来的一切,但不一定会覆盖其他类型的window控件, 比如iframe和其他的select,如果你使用过类似Delphi这样的环境就会自然理解。IE7解决了此类BUG。
有多种种办法;
以下例子系网上资源整理
原址: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> <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>
第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></select> <select></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=gb2312"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>简单菜单</title> <!-- 提供定位函数,用iframe作载体,不会被select挡住 By Fason(2003-5-21) --> <style id=s> #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></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框 </code> <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><option>hellohellohellohello</select><button onclick=aa.style.display=aa.style.display==“none”?“”:“none”>test</button> </code> 这种方法虽然也简单,但对复杂的层是来说还不是好的解决方法.