在CSS中重叠div的问题

我正在使用图像进行导航的网站上工作;您点击图像的不同组件，并且它们充当其他页面的链接。我看了一篇教程，解释了如何使用3个独立的div来获得我期望的效果;一个保存主图片的div，一个使用相对定位的重叠div，以及一个使用绝对定位的链接图像的div。到目前为止，这种方法对我来说工作得很好，给了我想要的效果，但是有一个小问题。在我的浏览器中，我总是会在页面右侧留下剩余的空间。这个问题对我来说很难说，所以我有一个Dreamweaver中堆叠div如何显示的图像，以及它在我的浏览器中出现的问题。在CSS中重叠div的问题

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>

任何帮助将不胜感激。

来源

2012-05-14 cachgill

什么是图像的实际尺寸。有几件事值得我关注：1）你应该没有内联样式。将div元素的样式移动到外部css。 2）将内嵌的图像的高度和宽度应用于图像。为什么和尺寸是否与原始图像成比例？您是否使用Firebug或IE开发工具（F12）将元素作为UI中的渲染进行检查，以查看正在应用或继承的元素？ – rlcrews

你需要看看你的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）

最好的解决方案，我可以为您提供：

将您position:absolute的div的所有3成一个单一position:relative容器（有不止一个给你的楼梯效果）。然后给他们每个身高/宽度，并z-index（如果它仍然需要）。你应该开始很快看到事情的一起来。

HTH

来源

2012-05-15 00:13:36 Dawson

只是为了澄清添加px不会影响元素的渲染，它可能是不必要的，但将它包括在css或inline中不会影响渲染。 http://www.w3schools.com/cssref/pr_dim_height.asp – rlcrews

真棒，奇妙的帮助人，清理了一切，并把大量的代码减少了很多。 – cachgill

在CSS中重叠div的问题

回答

相关问题