Question

我有两个应该相互重叠的背景，以及一个应该与这两个背景重叠的容器。我无法让这个工作，即使我指定了一个位置，容器也会被推下来。

CSS：

body { 
  background:#1b1b1b;
  padding:0; margin:0;
  color:white; 
  text-align:center;
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
.map { 
  background:url(../images/map.png) no-repeat top center; 
  width:1280px; 
  height:335px;
  margin-left:auto; 
  margin-right:auto; 
  position:absolute; 
}
.map-bg { 
  background:url(../images/map-bg.png) repeat-x; 
  height:336px; 
  position:relative; 
}
.stripe { 
  background:url(../images/stripe.png) repeat-x;
  height:35px; 
  width:100%; 
  position:absolute;
  margin-top:158px; 
}
#container { 
  margin-left:auto; 
  margin-right:auto;
  width:924px; 
  height:100%; 
  text-align:left; 
}

HTML：

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Essbee</title>
    <link type="text/css" rel="stylesheet" href="css/main.css"  />
  </head>

  <body>

    <div class="bg">
      <div class="map"></div>
      <div class="map-bg"></div>
    </div>

    <div class="stripe"></div>

    <div id="container">
      <div id="header"></div>
      <div id="content"></div>
      <div id="footer">Footer</div>
    </div>

  </body>
</html>

Answer 1

这里的问题是你的HTML结构。根据我的收集，您希望将四个元素相互重叠，.map，。map-bg，.stripe和#container。您拥有HTML和CSS的方式不会发生，因为这些元素位于树中的不同级别。您应该做的是将所有内容包装在.bg中并将其所有位置设置为absolute，并将其父容器.bg设置为position: relative。在空元素中放置不间断空格 也是一种很好的做法，因为许多浏览器不会以可预测的方式呈现完全空的块级元素。

<body>

  <div class="bg">
    <div class="map">&nbsp;</div>
    <div class="map-bg">&nbsp;</div>

    <div class="stripe">&nbsp;</div>

    <div id="container">
      <div id="header">&nbsp;</div>
      <div id="content">&nbsp;</div>
      <div id="footer">Footer</div>
    </div>

  </div>

</body>

更新了CSS：

body { 
  background:#1b1b1b;
  padding:0; margin:0;
  color:white; 
  text-align:center;
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
.bg {
  position: relative;
}
.map { 
  background:url(../images/map.png) no-repeat top center; 
  width:1280px; 
  height:335px;
  margin-left:auto; 
  margin-right:auto; 
  position:absolute; 
}
.map-bg { 
  background:url(../images/map-bg.png) repeat-x; 
  height:336px; 
  position: absolute; 
}
.stripe { 
  background:url(../images/stripe.png) repeat-x;
  height:35px; 
  width:100%; 
  position:absolute;
  margin-top:158px; 
}
#container {
  position: absolute; 
  margin-left:auto; 
  margin-right:auto;
  width:924px; 
  height:100%; 
  text-align:left; 
}

试试看，你应该看到的结果更符合我的想法。

Answer 2

因为.map-bg是position：relative，所以它会按下#container。

也许您要做的是在.bg中移动.stripe并将.bg设置为position：absolute。这样，.stripe将被定位在.map-bg下（我假设这是你想要的？）并且#container将位于所有背景div之上。

Answer 3

你有截图显示你想要做什么吗？至于我可以解决的问题，你试图将div放在另外两个div上，但几乎肯定有一种更好的方法，而不是将所有内容放在绝对位置。

Answer 4

据我所知，你没有在你的CSS中指定类“bg”。

如何定位CSS <div> s而不破坏？</div>

4 个答案: