Question

我需要将这两个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>

Answer 1

您应该将两个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>

Answer 2

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

Link to fiddle

<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属性，将它们设置为相同的左侧和顶部位置（可以是像素，百分比等），然后确定哪个应放在顶部通过改变z指数来改变另一个。较高的z-index编号div将位于顶部，因此.one div将位于顶部，您将看到更多的红色而不是蓝色。交换值，使.one有z-index：1，.two有z-index：2，你会看到更多蓝色（因为这些是字体颜色）。

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

Answer 3

您有几个选择：

在div上使用绝对位置。 http://jsfiddle.net/sUyS3/1/
您可以在第二个div上使用负边距。

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

我需要将这两个div叠加在一起，同时保持内容位置

3 个答案: