CSS中的重叠元素

Question

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

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

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

这可能吗？

谢谢,

AJ

Answer 1

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

<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

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

.layered {
  display: grid;
}

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

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

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

演示：

提琴手

.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 3

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

Answer 4

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

<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>