html 下拉组件被下面的组件挡住,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框

以下例子系网上资源整理

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

Div被Select挡住，是一个比较常见的问题。

有的朋友通过把div的内容放入iframe或object里来解决。

可惜这样会破坏页面的结构，互动性不大好。

这里采用的方法是：

虽说div直接盖不住select

但是div可以盖iframe，而iframe可以盖select,

所以，把一个iframe来当作div的底，

这个div就可以盖住select了.

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";

}

}

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

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

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

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

(intObjTop+objTemp.clientHeight>intDivTop)&&

(intObjTop

//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

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;

}

点击让select隐藏

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

第2种方法：用iframe作载体

以下是一简单的例子:

-----------

简单菜单

#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}

function window.onload(){

var shtml=div1.innerHTML;

var ifm=document.createElement("")

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+"

"+shtml+"")

}

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'

}

中国程序员

sohu

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

hellohellohellohellotest

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