Question

关于样式div层被覆盖,如何把覆盖的显示在上面

<script>
function showhidden(id,i){
var select_obj=document.getElementsByTagName("select");
if(i==1){
document.getElementById(id).style.display="";
}else{
document.getElementById(id).style.display="none";
}
}
</script>
<div onMouseOver="showhidden('hidDiv1','1');" onMouseOut="showhidden('hidDiv1',0);">
<div style="width:200px; height:33px; margin-bottom:3px;z-index:0"><a href="#"><img src="http://d1.sina.com.cn/200901/14/164840.jpg" /></a></div>
<!--浮动层-->
<div id="hidDiv1" style="width:69px;display:none;position:absolute;margin-left:60px;z-index:100"><div style="position:absolute"><img src="/ress/images/home4/div_left_coin.gif" height="19" width="11"/></div>
<table title="业务办理" width="100%" border="0" cellspacing="0" cellpadding="0" height="100" style="float:right;width:260px;border:2px solid #b6b4b4;background-color:#ffffff;margin-left:-1px;margin-top:-60px;padding:0px;padding-top:0px;text-align:center;padding-left:3px;z-index:100">

<tr><td height="10">helphelp</td></tr>
>
<tr>
<td style="border-bottom:#e5e5e5 dashed 1px; color:#2883d4;" height="30">aaaaaaaaaaaaaa</td>
</tr>

</table>
dakiler你好,用你改的试了,还是不行!能否再帮帮我呀?成功了加分给你

Answer 1

我稍微改了下:主要是zindex的问题。
zIndex越大，越在上层，你想要被覆盖的在上面，那么你的那个hidDiv的zindex要小于原来的那个div

<script>
function showhidden(id,i){
var select_obj=document.getElementsByTagName("select");
if(i==1){
document.getElementById(id).style.display="";
document.getElementById(id).style.zIndex=-1;
}else{
document.getElementById(id).style.display="none";
}
}
</script>
<div onMouseOver="showhidden('hidDiv1','1');" onMouseOut="showhidden('hidDiv1',0);">
<div style="width:200px; height:33px; margin-bottom:3px;z-index:0"><a href="#"><img src="http://d1.sina.com.cn/200901/14/164840.jpg" /></a></div>
<!--浮动层-->
<div id="hidDiv1" style="width:69px;display:none;position:absolute;margin-left:60px;"><div style="position:absolute"><img src="/ress/images/home4/div_left_coin.gif" height="19" width="11"/></div>
<table title="业务办理" width="100%" border="0" cellspacing="0" cellpadding="0" height="100" style="float:right;width:260px;border:2px solid #b6b4b4;background-color:#ffffff;margin-left:-1px;margin-top:-60px;padding:0px;padding-top:0px;text-align:center;padding-left:3px;z-index:100">

<tr><td height="10">helphelp</td></tr>
>
<tr>
<td style="border-bottom:#e5e5e5 dashed 1px; color:#2883d4;" height="30">aaaaaaaaaaaaaa</td>
</tr>

</table>

Answer 2

<script>
function showhidden(id,i){
var select_obj=document.getElementsByTagName("select");
if(i==1){
document.getElementById(id).style.display="";
document.getElementById(id).style.zIndex=1;
}else{
document.getElementById(id).style.display="none";
}
}
</script>
<div onMouseOver="showhidden('hidDiv1','1');" onMouseOut="showhidden('hidDiv1',0);">
<div style="width:200px; height:33px; margin-bottom:3px"><a href="#"><img src="http://d1.sina.com.cn/200901/14/164840.jpg" /></a></div>
<!--浮动层-->
<div id="hidDiv1" style="width:69px;display:none;position:absolute;margin-left:60px;"><div style="position:absolute"><img src="/ress/images/home4/div_left_coin.gif" height="19" width="11"/></div>
<table title="业务办理" width="100%" border="0" cellspacing="0" cellpadding="0" height="100" style="float:right;width:260px;border:2px solid #b6b4b4;background-color:#ffffff;margin-left:-1px;margin-top:-60px;padding:0px;padding-top:0px;text-align:center;padding-left:3px;z-index:100">

<tr><td height="10">helphelp</td></tr>
>
<tr>
<td style="border-bottom:#e5e5e5 dashed 1px; color:#2883d4;" height="30">aaaaaaaaaaaaaa</td>
</tr>

</table>
看一下是不是这种效果

Answer 3

<script>
function showhidden(id,i){
var select_obj=document.getElementsByTagName("select");
if(i==1){
document.getElementById(id).style.display="";
}else{
document.getElementById(id).style.display="none";
}
}
</script>

<div onmouseover="showhidden('hidDiv1','1');" onmouseout="showhidden('hidDiv1',0);">
<!--浮动层-->
<div id="hidDiv1" style="width: 69px; display: none; position: absolute; margin-left: 60px;
z-index: 100">
<table title="业务办理" width="100%" border="0" cellspacing="0" cellpadding="0" height="100"
style="float: right; width: 260px; border: 2px solid #b6b4b4; background-color: #ffffff;
margin-left: -1px; margin-top: 20px; padding: 0px; padding-top: 0px; text-align: center;
padding-left: 3px; z-index: 100">
<tr>
<td height="10">
helphelp
</td>
</tr>
<tr>
<td style="color: #2883d4;" height="30">
aaaaaaaaaaaaaa
</td>
</tr>
</table>
</div>
<div style="width: 200px; height: 33px; margin-bottom: 3px; z-index: 0">
<a href="#">
<img src="http://d1.sina.com.cn/200901/14/164840.jpg" /></a></div>

如果A要覆盖B．就把A放在B的上面。你放在下面怎么可能覆盖得了上面呢
还有这个样式写的很不规范。许多不必要的样式．建议规范书写，看得有点小麻烦哦～