Question

我正在开发一个使用图片进行导航的网站;您单击图像的不同组件，它们充当其他页面的链接。我查看了一个教程，解释了如何使用3个独立的div来获得我所瞄准的效果;包含主图片的div，使用相对定位的重叠div，以及使用绝对定位的链接图像的div。到目前为止，这种方法对我来说效果很好，并且给了我想要的效果，但是有一个小问题。在我的浏览器中，我总是在页面右侧获得额外的空间。这个问题对我来说很难说，所以我有一个图像，显示堆叠的div在Dreamweaver中的显示方式以及浏览器中显示的问题。

enter image description here

您可以在第一张图片中查看两个车库门并查看问题。最右边的车库门在网络浏览器中正确显示，完全覆盖左侧的车库门。但是，正如您在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）
默认情况下，测量值将<img>传递给px - 添加“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

CSS中重叠div的问题

1 个答案: