HTML网页中div如何挡住select

最新推荐文章于 2022-11-13 11:43:29 发布

最新推荐文章于 2022-11-13 11:43:29 发布 · 84 阅读

文章标签：

本文探讨了IE6浏览器中div元素与select元素的Z-Index层叠问题，通过使用iframe作为遮罩层来解决div无法覆盖select的问题，并提供了解决方案的示例代码。

在IE6.0中，对div(或者FIELDSET)和select设置z-index,但是div始终无法在select的上层。 这不知是否IE6.0的一个处理错误。
错误的示例，可见如下代码(借用了某位网友的代码)

<HTML>
<HEAD>
<TITLE>Z-Index</TITLE>
<script>...
functionsetindex()
...{
div1.style.zIndex=text1.value;
select1.style.zIndex=text2.value;
getindexes();
}

functiongetindexes()...{

text1.value=div1.style.zIndex;
text2.value=select1.style.zIndex;
text3.value=5;
}
</script>
</HEAD>
<BODYonload="getindexes()">

Div
<inputtype="text"value=""id=text1name=text1><p>

Select
<inputtype="text"value=""id=text2name=text2><p>

IFrame
<inputtype="text"value=""id=text3name=text3><p>
<inputtype="button"value="SetZ-Index"id=button1name=button1onclick="setindex()">
<DIVid=div1name=div1style="width:200;height:200;background-color:lightblue;
position:absolute;left:350;top:250;z-index:">DIV</DIV>
<selectid=select1name=select1style=";position:absolute;left:300;top:400;width=300;z-index:"
size=1>
<option>Option1
<option>Option2
<option>Option3
</select>
<IFRAMEid=iframe1name=iframe1src=""scroll=nonestyle="width:100;height:115;position:absolute;
left:400;top:300;border-color:green;z-index:5"></iframe>
</BODY>
</HTML>

查了一下网上的资料，说是可以用iframe做底，挡住select，也就达到了div挡住select的效果。试了一下，确实有效，下面是源码；

<html>
<script>...
functionsetZIndex(isShow)
...{
varDivRef=document.getElementById('menu');
varIfrRef=document.getElementById('back');
if(isShow)
...{
DivRef.style.display="block";
IfrRef.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;

}
else
...{
DivRef.style.display="none";
IfrRef.style.display="none";
}

}

</script>
<FIELDSETid="menu"style="z-index:999;width:500;overflow-x:auto;height:100;overflow-y:auto;position:absolute;display:none;border:1pxdotted#6699FF;background:#E5F0FF">
<LEGENDACCESSKEY=C>CreditCardInformation</LEGEND>
<P>
<LABELACCESSKEY=V>
<INPUTTYPE=radioNAME=cardVALUE=visa>Visa
</LABEL>
<LABELACCESSKEY=M>
<INPUTTYPE=radioNAME=cardVALUE=mc>MasterCard
</LABEL>
<BR>
<LABELACCESSKEY=N>
Number:<INPUTTYPE=textNAME=number>
</LABEL>
<BR>
<LABELACCESSKEY=E>
Expiry:<INPUTTYPE=textNAME=expiry>
</LABEL>
</P>
</FIELDSET>
<iframeid="back"src=""scrolling="no"frameborder="0"style="position:absolute;top:0px;left:0px;display:none;">
</iframe>

<divstyle="z-index:3;text-align:center;">
<Select>
<option>aaaabbbbbbbbbbbbbbbbbbbbsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssfsdf</option>
<option>bbbb</option>
</Select>
</div>

<br><br><br><br><br><br><br>
<ahref="#"onclick="setZIndex(true)">展开</a>
<ahref="#"onclick="setZIndex(false)">收起</a>
</html>

对div也是一样的代码。不再重复。