层被Select控件盖住的问题

style中加上z-index:10
取个大数字就不会被z-index小的数字挡住了

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

感谢：smoothwood(吾谁与归) 的积极回复，但你办法，我试过了，不行
我也遇到过此问题，没有解决。期盼ing
用OBJECT试试：<OBJECT id=aa style="display:none;z-index:1000; position:absolute; top:0; left:0; width:152; height: 200;" type="text/x-scriptlet" data="about:<body><div style='position:absolute;left:0;top:0;width:152;height:200;font:14;color:white;background:black;border:1 solid black'>test</div>"></OBJECT>
<select><option>hellohellohellohello</select><button onclick=aa.style.display=aa.style.display=="none"?"":"none">test</button>
用iframe做载体，例子:<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>简单菜单</title>

<style id=s>
#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}
</style>
</head>
<body>
<script>
function window.onload(){
var shtml=div1.innerHTML;
var ifm=document.createElement("<iframe frameborder=0 marginheight=0 marginwidth=0 hspace=0 vspace=0 scrolling=no></iframe>")
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+"<body leftmargin=0 topmargin=0>"+shtml+"</body>")
}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'
}
</script>
<img id=img1 onmouseover="show()" onmouseout="hide()" src="ie.gif"><br/><select></select>
<div id=div1 onmouseover="style.visibility=''" onmouseout="style.visibility='hidden'" style="visibility:hidden;">
<div href="http://www.csdn.net" onmouseover="style.backgroundColor='highlight'" onmouseout="style.backgroundColor=''" onclick="window.open(href)">中国程序员</div>
<div href="http://www.sohu.com" onmouseover="style.backgroundColor='highlight'" onmouseout="style.backgroundColor=''" onclick="window.open(href)">sohu</div>
</div>
</body>
</html>
可以给你一个解决方案, 如果你不嫌麻烦的话, 我告诉你思路
在显示一个层的时侯, 先调用一个过程, 把所以这个层下的select控件全隐掉
那些被盖住一半的, 你可以在那个select外加一层span,把overflow设为hidden, 把宽度设为  要显示的层的最左坐标 - 这个被盖住一半的select的左坐标
哦~ 不用了, 我找到另外的方案了, 你拿去用吧<html>
<script language="javascript">
function clickProcess(){
  divHandle=document.getElementById('div');

  if (divHandle.style.visibility=='hidden'){
     divHandle.style.visibility='visible';
document.all.framemask.style.visibility = 'visible';
  }else{
     divHandle.style.visibility='hidden';
document.all.framemask.style.visibility = 'hidden';
  }
}function checkOverflow(divObj){
if(!divObj)return; var l,t,r,b;
l = divObj.offsetLeft;
t = divObj.offsetTop;
r = l + divObj.offsetWidth;
b = t + divObj.offsetHeight; var l1,t1,r1,b1; var selectObjs = document.all.tags("SELECT")
for(var i = 0; i < selectObjs.length; i ++){
var obj = selectObjs[i];
l1 = obj.offsetLeft;
t1 = obj.offsetTop;
r1 = l1 + obj.offsetWidth;
b1 = t1 + obj.offsetHeight;
if(rectInRange(l,t,r,b,l1,t1,r1,b1)){

}
}
}function rectInRange(l,t,r,b, l1, t1, r1, b1){
if((l1>=l)&&(t1>=t)&&(r1<=r)&&(b1<=b))
return 0;
if((l1<l)&&(t1<t)&&(r1>r)&&(b1>b))
return 1.;
return 2;
//返回值, 0完全盖住, 1没有盖住, 2,盖住一部份
}
</script>
<body>
输入选项：<input type="text"><input type="button" value="……" width=5  onclick="clickProcess()"><br>
<div name="div" id="div" style="position:absolute;z-index:100;width:300px;height:200px;visibility:hidden; background-color: rgb(223,71,177) ">
<table>
   <tr>
      <td>11111111111111</td>
   </tr>
    <tr>
      <td>22222222222222</td>
   </tr>
   <tr>
      <td>33333333333333</td>
   </tr>
   <tr>
      <td>这是一个层，我想显示在select的上面</td>
   </tr>
</table>
</div>
输入： <select name="" height=200 style="width:200;height:200"></select>
<select name="" height=200 style="position:absolute;left:200px;width:200;height:200"></select>
<iframe src="about:" frameborder=0 id=framemask style="position:absolute;visibility:hidden;width:300px;height:200px;left:expression(document.all('div').offsetLeft);top:expression(document.all('div').offsetTop);background-color:white;"></iframe>
</body>
</html>
<html>
<script language="javascript">
function clickProcess(){
  divHandle=document.getElementById('div');

  if (divHandle.style.visibility=='hidden'){
     divHandle.style.visibility='visible';
document.all.framemask.style.visibility = 'visible';
  }else{
     divHandle.style.visibility='hidden';
document.all.framemask.style.visibility = 'hidden';
  }
}
</script>
<body>
输入选项：<input type="text"><input type="button" value="……" width=5  onclick="clickProcess()"><br>
<div name="div" id="div" style="position:absolute;z-index:100;width:300px;height:200px;visibility:hidden; background-color: rgb(223,71,177) ">
<table>
   <tr>
      <td>11111111111111</td>
   </tr>
    <tr>
      <td>22222222222222</td>
   </tr>
   <tr>
      <td>33333333333333</td>
   </tr>
   <tr>
      <td>这是一个层，我想显示在select的上面</td>
   </tr>
</table>
</div>
输入： <select name="" height=200 style="width:200;height:200"></select>
<select name="" height=200 style="position:absolute;left:200px;width:200;height:200"></select>
<iframe src="about:" frameborder=0 id=framemask style="position:absolute;visibility:hidden;width:300px;height:200px;left:expression(document.all('div').offsetLeft);top:expression(document.all('div').offsetTop);background-color:white;"></iframe>
</body>
</html>
出现问题: 1. 使用层制作的下拉菜单下正好有FLASH动画,菜单被动画遮挡.
2. 页面中的层浮动广告当经过FLASH动画时,浮动层从动画画穿过,实际显示被遮挡. 解决方法: 按如下任一方法设置设置FLASH对象的属性
<param name="wmode" value="transparent"> FLASH将透明
<param name="wmode" value="Opaque"> FLASH仍将保持不透明