图片层盖住其他层的问题【着急用，高分求助】

cs5276 2009-12-14 11:31:06

这个帖子今天早上问过一遍，真诚求助高手帮忙解答！
请先复制代码到浏览器上看一下，着重注意红色的代码。
我的目的：只是想通过<div id="rightdes"> </div>【红色的边框表示的区域】引入spoonright.png这张图片，而且description【黄色边框表示的区域】的z-index还必须相对较大，以挡住main的一些内容。
而middletop【蓝色边框表示的区域】包含有一些文字链接和特效，而在<div id="rightdes"> </div>的横向和纵向区域上的一些文字链接和特效就失效了。

失效：IE7.0下还是可用的，但是在别的浏览器，比如FF，Chrome就不行了。大家可以看屏幕偏右下角的那个<div id="rightsecond">，里面的tab标签切换效果和middletop本应显示的效果是一样的，但是middletop的TAB标签和偏上方的一些文字链接失效了。

请问怎么处理，才能达到“既可以使<div id="rightdes"> </div>【红色的边框表示的区域】挡住main上的某些其他内容，又能让在<div id="rightdes"> </div>【红色的边框表示的区域】横向、纵向区域的middletop【蓝色边框表示的区域】的文字链接或特效不失效？”

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>暂时没有标题</title>
<script language="javascript" type="text/javascript">
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li");
var mli=document.getElementById("main"+m).getElementsByTagName("ul");
for(i=0;i<tli.length;i++){
tli[i].className=i==n?"hover":"";
mli[i].style.display=i==n?"block":"none";
}
}
</script>
<style>
* { padding:0px; margin:0px; font-family:"宋体", Arial;}
body { background:url(header11.jpg) repeat-x top left; background-color:#1D1C22; }
a:link, a:visited { text-decoration:none;}
ul, ul li { list-style:none;}
#container { width:980px; margin:0 auto; position:relative;}

#header { width:100%; height:300px; position:absolute; top:0px; left:0px; z-index:100;}
#header h1 { z-index:200; color:#fff; font-size:26px; font-family:"幼圆"; width:120px; float:left; position:relative; top:30px; left:240px;}
#header h3 { color:#fff; font-family:"Verdana"; float:left; position:relative; top:54px; left:190px;}
#header h2 { float:left; font-size:1px; text-indent:-1000px; position:absolute; top:54px; left:90px; height:132px; width:140px; background:url(h2bg1.png) no-repeat top left; z-index:3; border:2px #fff solid;}

#nav { float:left; height:34px; width:600px; position:absolute; top:104px; left:228px; font-size:12px; background-color:#fff; }

#description { z-index:90; float:left; position:absolute; top:138px; left:167px; width:755px; height:55px; color:#000; background:url(spoonleft.png) no-repeat top right; border:2px #ff0 solid;}
#description ul { float:left; width:auto; height:55px; padding:20px 0px 0px 100px;}
#description li { font-size:12px; display:block; float:left; width:200px; max-width:450px;}
#rightdes { z-index:190; position:absolute; top:62px; left:922px; width:75px; height:220px; background:url(spoonright.png) no-repeat top right; border:2px #f00 solid;}
#main { z-index:80; width:980px; height:700px; float:left; margin-top:162px; position:relative; background:#F2CB90; /*background:#935026; background:#E9BB70;*/}

#left { float:left; color:#fff; background-color:#935026; width:160px; height:692px; z-index:82; padding:1px; border:6px #fff solid; border-width:6px 0px 0px 6px; position:relative; text-align:center;}

#leftcaption { width:135px; padding-left:28px; height:25px; line-height:25px; margin:25px 0px 0px 0px;}

#leftcontent { width:160px; float:left; text-align:left;}

.content { width:350px; height:285px;}

dl.items { height:285px; width:300px; position:absolute; top:45px; left:20px;}

span.formore { display:block; width:62px; height:19px; line-height:19px; text-align:center; position:relative; float:right; right:10px; bottom:25px;}

#middletop { z-index:400; width:350px; /*background-color:#E9BB70; */ height:300px; float:left; margin:55px 0px 0px 25px; position:relative; border:1px #00f solid; background:url(diyidiv.jpg) no-repeat top left;}
#middletop .caption { position:absolute; top:-10px; left:-20px;}
.menu1box { width:200px; height:15px; position:relative; top:0px; left:150px; z-index:100; overflow:hidden;}
#menu1 li { font-size:12px; color:#fff; background-color:#935026; margin:0px 5px; border:1px #935026 solid; float:left; display:block; cursor:pointer; width:52px; text-align:center; line-height:15px; height:15px;}
#menu1 li a { text-decoration:none; color:#fff;}
#menu1 li.hover { background-color:#67302B; color:#fff; border-color:#67302B;}
.main1box { height:280px; width:350px; overflow:hidden;}
#main1 ul { display: none;}
#main1 ul.block{ display: block;}
#righttop { z-index:400; width:350px; background:url(righttop.jpg) no-repeat top left; height:300px; float:left; margin:55px 0px 0px 25px; position:relative; border:1px #00f dashed;}

#righter { position:relative; z-index:200; float:right; width:40px; height:100%; background-color:#F2CB90; background:url(biankuang.gif) repeat-y top left; border:0px;}

#middlesecond { z-index:95; width:350px; height:300px; float:left; margin:20px 0px 0px 25px; background:url(2.jpg) no-repeat top left; position:relative; border:1px #67302B dashed;}

#rightsecond { z-index:95; width:350px; height:300px; float:left; margin:20px 0px 0px 25px; background:url(1.jpg) no-repeat top left; position:relative; border:1px #67302B dashed;}
#rightsecond .caption { position:absolute; top:-10px; left:-20px;}
.menu4box { width:200px; height:15px; position:relative; top:0px; left:150px; z-index:100; overflow:hidden;}
#menu4 li { font-size:12px; color:#fff; background-color:#935026; margin:0px 5px; border:1px #935026 solid; float:left; display:block; cursor:pointer; width:52px; text-align:center; line-height:15px; height:15px;}
#menu4 li a { text-decoration:none; color:#fff;}
#menu4 li.hover { background-color:#67302B; color:#fff; border-color:#67302B;}
.main4box { height:280px; width:350px; overflow:hidden;}
#main4 ul { display: none;}
#main4 ul.block{ display: block;}

#footerborder { width:987px; height:40px; float:left; z-index:200; }
#footerborderleft { width:940px; height:40px; float:left; z-index:200; background:url(biankuang2.gif) repeat-x top right;}
#footerborderright { width:40px; height:40px; float:left; z-index:200; background:url(cornerjb.gif) no-repeat top left;}
</style>
</head>

<body>
<div id="container">
<div id="header">
<h1>咖啡</h1>
<h3>one sentence about coffee</h3>
<h2>:)</h2>
<div id="nav">NAVIGATION
</div>
</div>
<div id="rightdes"> </div>
<div id="description">
<ul>
<li>本站的推荐本站的推荐</li>
<li>本站的推荐本站的推荐</li>
<li>本站的推荐本站的推荐</li>
</ul>
</div>

<div id="main">
<div id="left">
LEFT
</div>

<div id="middletop">
<div class="caption">
<span class="capleft"> </span>
<h2 class="capcontent">咖啡的文化</h2>
<span class="capright"> </span>
</div>
<div class="menu1box">
<ul id="menu1">
<li class="hover" onmouseover="setTab(1,0)"><a href="#">新闻</a></li>
<li onmouseover="setTab(1,1)"><a href="#">评论</a></li>
<li onmouseover="setTab(1,2)"><a href="#">技术</a></li>
</ul>
</div>
<div class="main1box">
<div class="main" id="main1">
<ul class="block"><li><dl class="items">
<dd class="firstd"><a href="">咖啡的。。。。。咖啡的。。。。</a></dd>
<dd><a href="">咖啡的。。。。。咖啡的。。。。</a></dd>
<dd><a href="">咖啡的。。。。。咖啡的。。。。</a></dd>
<dd><a href="">咖啡的。。。。。咖啡的。。。。</a></dd>
<dd><a href="">咖啡的。。。。。咖啡的。。。。</a></dd>
<dd><a href="">咖啡的。。。。。咖啡的。。。。</a></dd>
</dl></li></ul>
<ul><li><dl class="items">
<dd class="firstd"><a href="">咖啡的。咖啡的。。。。</a></dd>
<dd><a href="">咖啡的。。咖啡的。。。。</a></dd>
<dd><a href="">咖啡的。。。。咖啡的。。。。</a></dd>
<dd><a href="">咖啡的。。。。。咖啡的。。。。</a></dd>
</dl></li></ul>
<ul><li><dl class="items">
<dd class="firstd"><a href="">咖啡的咖啡的。。。。</a></dd>
<dd><a href="">咖啡的。咖啡的。。。。</a></dd>
<dd><a href="">咖啡的。咖啡的。。。。</a></dd>
</dl></li></ul>
</div>
</div>
<span class="formore"><a href="">更多 »</a></span>
</div>

<div id="righttop">
RIGHTTOP
</div>

<div id="righter">a</div>

<div id="middlesecond">
MIDDLE SECOND
</div>
<div id="rightsecond">
<div class="caption">
<span class="capleft"> </span>
<h2 class="capcontent">咖啡的文化</h2>
<span class="capright"> </span>
</div>
<div class="menu4box">
<ul id="menu4">
<li class="hover" onmouseover="setTab(4,0)"><a href="#">新闻</a></li>
<li onmouseover="setTab(4,1)"><a href="#">评论</a></li>
<li onmouseover="setTab(4,2)"><a href="#">技术</a></li>
</ul>
</div>
<div class="main4box">
<div class="main" id="main4">
<ul class="block"><li><dl class="items">
<dd class="firstd"><a href="">咖啡的。。。。。咖啡的。。。。</a></dd>
<dd><a href="">咖啡的。。。。。咖啡的。。。。</a></dd>

</dl></li></ul>
<ul><li><dl class="items">
<dd class="firstd"><a href="">咖啡的。咖啡的。。。。</a></dd>
<dd><a href="">咖啡的。。咖啡的。。。。</a></dd>

</dl></li></ul>
<ul><li><dl class="items">
<dd class="firstd"><a href="">咖啡的咖啡的。。。。</a></dd>
<dd><a href="">咖啡的。咖啡的。。。。</a></dd>

</dl></li></ul>
</div>
</div>
<span class="formore"><a href="">更多 »</a></span>
</div>
</div>
<div id="footerborder">
<span id="footerborderleft"> </span>
<span id="footerborderright"> </span>
</div>

</div>
</body>
</html>

...全文