<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
在IE6.0中,对div(或者FIELDSET)和select设置z-index,但是div始终无法在select的上层。 这不知是否IE6.0的一个处理错误。 错误的示例,可见如下代码(借用了某位网友的代码)
<HTML>
<HEAD>
<TITLE>Z-Index</TITLE>
<script>...
function setindex()
...{
div1.style.zIndex=text1.value;
select1.style.zIndex=text2.value;
getindexes();
}
function getindexes()...{
text1.value=div1.style.zIndex;
text2.value=select1.style.zIndex;
text3.value=5;
}
</script>
</HEAD>
<BODY onload="getindexes()">
Div
<input type="text" value="" id=text1 name=text1 ><p>
Select
<input type="text" value="" id=text2 name=text2><p>
IFrame
<input type="text" value="" id=text3 name=text3><p>
<input type="button" value="Set Z-Index" id=button1 name=button1 onclick="setindex()">
<DIV id=div1 name=div1 style="width:200;height:200;background-color:lightblue;
position:absolute;left:350;top:250;z-index:">DIV</DIV>
<select id=select1 name=select1 style=";position:absolute;left:300;top:400;width=300;z-index:"
size=1 >
<option>Option1
<option>Option2
<option>Option3
</select>
<IFRAME id=iframe1 name=iframe1 src="" scroll=none style="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>...
function setZIndex(isShow)
...{
var DivRef = document.getElementById('menu');
var IfrRef = 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>
<FIELDSET id="menu" style="z-index:999;width:500;overflow-x:auto;height:100;overflow-y:auto;position:absolute;display:none;border:1px dotted #6699FF;background:#E5F0FF">
<LEGEND ACCESSKEY=C>Credit Card Information</LEGEND>
<P>
<LABEL ACCESSKEY=V>
<INPUT TYPE=radio NAME=card VALUE=visa> Visa
</LABEL>
<LABEL ACCESSKEY=M>
<INPUT TYPE=radio NAME=card VALUE=mc> MasterCard
</LABEL>
<BR>
<LABEL ACCESSKEY=N>
Number: <INPUT TYPE=text NAME=number>
</LABEL>
<BR>
<LABEL ACCESSKEY=E>
Expiry: <INPUT TYPE=text NAME=expiry>
</LABEL>
</P>
</FIELDSET>
<iframe id="back" src="" scrolling="no" frameborder="0" style="position:absolute; top:0px; left:0px;display:none;">
</iframe>
<div style="z-index:3;text-align: center;">
<Select>
<option>aaaabbbbbbbbbbbbbbbbbbbbsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssfsdf</option>
<option>bbbb</option>
</Select>
</div>
<br><br><br><br><br><br><br>
<a href="#" onclick="setZIndex(true)">展开</a>
<a href="#" onclick="setZIndex(false)">收起</a>
</html>
对div也是一样的代码。不再重复。