HTML网页中div如何挡住select

最新推荐文章于 2025-07-10 11:51:11 发布

piperzero

最新推荐文章于 2025-07-10 11:51:11 发布

阅读量1.3k

点赞数

分类专栏：网站建设文章标签： div html iframe button scroll menu

网站建设专栏收录该内容

740 篇文章

订阅专栏

本文探讨了IE6.0浏览器中div和select元素使用z-index属性时出现的层叠显示问题，并提供了一种解决方案：通过使用iframe元素作为遮罩层来实现正确的层叠效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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也是一样的代码。不再重复。