Question

如何在CSS中重叠两个元素，例如

<div>Content 1</div>
<div>Content 2</div>

我希望这两个内容（它们可以是任何内容）重叠，因此内容2显示在与内容1相同的左上角，并且它们看起来重叠。内容1应该从文档的正常流程开始，而不是在屏幕上的某个固定位置。

这可能吗？

谢谢，

AJ

Answer 1

最简单的方法是在两个元素上使用position:absolute。您可以绝对相对于页面定位，或者您可以通过将容器div设置为position:relative

来相对于容器div绝对定位

<div id="container" style="position:relative;">
    <div id="div1" style="position:absolute; top:0; left:0;"></div>
    <div id="div2" style="position:absolute; top:0; left:0;"></div>
</div>

Answer 2

我认为您可以使用相对定位，然后设置第二个DIV的顶部/左侧定位，直到您将其置于所需位置。

Answer 3

您可以使用相对定位来重叠元素。但是，它们通常占用的空间仍将保留给元素：

<div style="background-color:#f00;width:200px;height:100px;">
    DEFAULT POSITIONED
</div>
<div style="background-color:#0f0;width:200px;height:100px;position:relative;top:-50px;left:50px;">
    RELATIVE POSITIONED
</div>
<div style="background-color:#00f;width:200px;height:100px;">
    DEFAULT POSITIONED
</div>

在上面的例子中，两个'DEFAULT POSITIONED'元素之间会有一个空格块。这是因为'RELATIVE POSITIONED'元素仍然保留了它的空间。

如果您使用绝对定位，您的元素将不会保留任何空间，因此您的元素实际上会重叠，而不会破坏您的文档：

<div style="background-color:#f00;width:200px;height:100px;">
    DEFAULT POSITIONED
</div>
<div style="background-color:#0f0;width:200px;height:100px;position:absolute;top:50px;left:50px;">
    ABSOLUTE POSITIONED
</div>
<div style="background-color:#00f;width:200px;height:100px;">
    DEFAULT POSITIONED
</div>

最后，您可以使用z-index控制哪些元素位于其他元素之上：

<div style="z-index:10;background-color:#f00;width:200px;height:100px;">
    DEFAULT POSITIONED
</div>
<div style="z-index:5;background-color:#0f0;width:200px;height:100px;position:absolute;top:50px;left:50px;">
    ABSOLUTE POSITIONED
</div>
<div style="z-index:0;background-color:#00f;width:200px;height:100px;">
    DEFAULT POSITIONED
</div>

Answer 4

使用CSS网格并将所有网格项设置在同一单元格中。

.layered {
  display: grid;
}

.layered > * {
  grid-column-start: 1;
  grid-row-start: 1;
}

将分层的类添加到元素中会导致其所有子元素相互层叠。

如果图层的大小不同，则可以设置justify-items和align-items属性以分别设置水平和垂直对齐方式。

演示：

JsFiddle

.layered {
  display: grid;

  /* Set horizontal alignment of items in, case they have a different width. */
  /* justify-items: start | end | center | stretch (default); */
  justify-items: start;

  /* Set vertical alignment of items, in case they have a different height. */
  /* align-items: start | end | center | stretch (default); */
  align-items: start;
}

.layered > * {
  grid-column-start: 1;
  grid-row-start: 1;
}


/* for demonstration purposes only */
.layered > * {
  outline: 1px solid red;
  background-color: rgba(255, 255, 255, 0.4)
}

<div class="layered">
  <img src="https://via.placeholder.com/250x100?text=first" />
  <p>
    2
  </p>
  <div>
    <p>
      Third layer
    </p>
    <p>
      Third layer continued
    </p>
    <p>
      Third layer continued
    </p>
    <p>
      Third layer continued
    </p>
  </div>
</div>

Answer 5

您可以尝试使用transform：translation属性，方法是使用Google chrome中的inspect元素在括号内传递适当的值。

您必须以两种方式<div>相互重叠来设置翻译属性，然后才能使用JavaScript根据您的要求显示和隐藏两种<div>

CSS中的重叠元素

5 个答案:

演示：