CSS中重叠div的问题

Question

我现在正在开发一个使用图像进行导航的网站；您单击图像的不同组件，它们将充当指向其他页面的链接。我查看了一个教程，该教程解释了如何使用 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>

任何帮助将不胜感激。

Answer 1

您需要查看您的 CSS（内联与否）。您还必须清理您的代码...

• <center> 已弃用，但不会导致您的问题；但是，您已将其应用于许多 100% 宽度的元素……因此无论如何它都无法居中。 (w3c reference)
• 默认情况下，测量值作为px 传递给<img> - 添加“px”可能会导致浏览器忽略它们。 height = "149" width = "130" 是您想要的，如果您要使用这种方法。 (w3c reference)
• z-index 只能用于应用了position 的元素（即：position:absolute/fixed/static/relative）——第一个z-index 目前什么都不做，从代码和您的意图来看，不需要。 (w3c reference)
• 因为您没有为任何东西分配宽度，所以会出现重叠。默认情况下，块元素是 100% 宽（到它们的父级）。您的浏览器正在欺骗您的眼睛。这些元素并没有真正按照你想要的方式行事。(w3c reference)

我能为您提供的最佳解决方案：

• 将所有 3 个 position:absolute div 放入一个 position:relative 容器中（拥有多个容器会产生阶梯效果）。然后给它们每个高度/宽度和z-index（如果仍然需要）。您应该会很快开始看到所有东西都融合在一起了。

HTH