HTML网页中div如何挡住select

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

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

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
在IE6.0中,对div(或者FIELDSET)和select设置z-index,但是div始终无法在select的上层。&nbsp;这不知是否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也是一样的代码。不再重复。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值