4

我需要将这两个 div 堆叠在一起，但我很难找到一种方法来实现它。我需要将所有文本保持在相同的位置，但需要能够让 div 位于一个和另一个之上，而无需为它们设置绝对位置。

这是我所拥有的...

<body>


<div style="position:relative;">
  <div style="position:absolute">
    <p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p>
    <p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p>
  </div>
</div>


<div style="position:relative;">
  <div style="position:absolute">
    <p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p>
    <p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p>
  </div>
</div>

</body>
4

3 回答 3

4

您应该将两个 div 的内容放在具有“position:relative”的外部 div 中，并在内部 div 上放置绝对定位，并为每个 div 添加一个 z-index。然后将较大的 z-index 放在较小的 z-index 上。

<body>
   <div style="position:relative;">
      <div style="position:absolute;z-index:0;">
         <p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p>
         <p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p>
      </div>

      <div style="position:absolute;z-index:1;">
         <p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p>
         <p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p>
      </div>
   </div>
</body>
于 2014-01-24T23:27:21.863 回答
3

也许这个简单的例子会帮助你：

链接到小提琴

<body>
    <div class="one">
        Content one
    </div>
    <div class="two">
        Content two
    </div>
</body>

CSS：

.one{
    color:red;
    position:absolute;
    left:0;
    top:0;
    z-index:2;
}
.two{
    color:blue;
    position:absolute;
    left:0;
    top:0;
    z-index:1;
}

通过绝对定位两个 div，我们可以使用 left 和 top 属性，将它们设置为相同的 left 和 top 位置（可以是像素、百分比等），然后确定哪个应该放在另一个之上通过改变 z-index。z-index 编号较高的 div 将位于顶部，因此 .one div 将位于顶部，您会看到红色多于蓝色。交换值，使 .one 具有 z-index:1 和 .two 具有 z-index:2，你会看到更多的蓝色（因为这些是字体颜色）。

从这里，您可以将其余内容放入我的示例中的 div 中。

于 2014-01-25T00:29:30.470 回答
2

你有几个选择：

  1. 在您的 div 上使用绝对位置。 http://jsfiddle.net/sUyS3/1/

  2. 您可以在第二个 div 上使用负边距。

    <div style="margin-top: -25px;">

于 2014-01-24T23:42:49.700 回答