我现在正在开发一个使用图像进行导航的网站；您单击图像的不同组件，它们将充当指向其他页面的链接。我查看了一个教程，该教程解释了如何使用 3 个单独的 div 来获得我想要的效果；一个包含主图片的 div，一个使用相对定位的重叠 div，以及一个使用绝对定位具有链接图像的 div。到目前为止，这种方法对我来说效果很好，并且给了我想要的效果，但是有一个小问题。在我的浏览器中，我总是在页面右侧获得额外的空间。这个问题对我来说有点难以用语言表达，所以我有一张关于堆叠 div 在 Dreamweaver 中的显示方式以及它在我的浏览器中出现的问题的图像。
您可以查看第一张图片中的两个车库门并查看问题所在。最右侧的车库门在 Web 浏览器中正确显示，完美地覆盖了左侧的车库门。但是，正如您在 Dreamweaver 中看到的那样，它超出了背景图像，并且额外的空白区域出现在浏览器中。这是下面的代码。
CSS：
<style type="text/css">
.body
{
height:100%;
margin:0px auto;
padding:0px;
}
.backgroundcontainer
{
width:100%;
height:600px;
background-image:url(backgroundstripe.png);
background-repeat:repeat-x;
}
.background
{
margin:0px auto;
padding:0px;
width:720px;
height:600px;
}
.textarea
{
margin:0px auto;
padding:0px;
background-color:#339900;
}
</style>
还有身体：
<body class="body">
<center>
<div class="backgroundcontainer">
<div class="background" style="z-index:0">
<!--House door link-->
<div style="position:relative;top:449px;left:270px;z-index:1">
<div style="position:absolute">
<a href="[Link goes here]">
<img src="housedoor.png" height="151px" width="96px">
</a>
</div>
</div>
<!--Garage door link-->
<div style="position:relative;top:451px;left:503px;z-index:1">
<div style="position:absolute">
<a href="[Link goes here]">
<img src="garagedoor.png" height="149px" width="130px">
</a>
</div>
</div>
<!--Window link-->
<div style="position:relative;top:449px;left:375px;z-index:1">
<div style="position:absolute">
<a href="[Link goes here]">
<img src="window.png" height="97px" width="96px">
</a>
</div>
</div>
<img src="navigation.png" width="720px" height="600px">
</div>
</div>
</center>
</body>
任何帮助将不胜感激。