CSS中的重叠元素

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

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

内容1
内容2

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

这可能吗

谢谢

---

AJ

最简单的方法是在两个元素上使用

位置：绝对值。您可以相对于页面绝对定位，也可以通过将容器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>


我认为您可以使用相对定位，然后设置第二个DIV的上/左位置，直到您将其置于所需位置
 可以使用相对定位重叠元素。但是，它们通常占用的空间仍将保留给元素：

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


默认定位
相对定位
默认定位

在上面的示例中，两个“默认定位”元素之间将有一块空白。这是因为“相对定位”元素仍保留其空间

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

<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索引控制哪些元素位于其他元素之上：

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


默认定位
绝对定位
默认定位
您可以尝试使用transform:translate属性，方法是使用Google chrome中的inspect元素在括号内传递适当的值

您必须以这样的方式设置translate属性：两个
相互重叠，然后您可以根据您的要求使用JavaScript显示和隐藏两个
，使用CSS网格，并将所有网格项设置为在同一单元格中

.layered{
显示：网格；
}
.layered>*{
网格列开始：1；
网格行开始：1；
}

将分层类添加到元素中会导致它的所有子元素都层叠在一起

如果图层大小不同，可以设置
对齐项目
和
对齐项目
属性，分别设置水平对齐和垂直对齐


演示：


.layered{
显示：网格；
/*设置项目的水平对齐，以防它们具有不同的宽度*/
/*对齐项目：开始|结束|中心|拉伸（默认）*/
证明项目：开始；
/*设置项目的垂直对齐，以防它们具有不同的高度*/
/*对齐项目：开始|结束|中心|拉伸（默认）*/
对齐项目：开始；
}
.layered>*{
网格列开始：1；
网格行开始：1；
}
/*仅供演示之用*/
.layered>*{
轮廓：1px纯红；
背景色：rgba（255、255、255、0.4）
}


2.


第三层


第三层继续


第三层继续


第三层继续

看起来你可以通过定位来完成。您有任何参考站点吗？实际上，您不需要在两个元素上都使用
位置：absolute
。如果其中一个绝对位于（0,0），它将与另一个重叠）。问题是页面布局中没有考虑绝对定位元素的尺寸。非常感谢，即使这个答案已经有4年了，它仍然有用。我每天都在“读、写和CSS”中流血，但有时我仍然忘了设置父元素的位置，以确保子元素不会按照祖父母的方式来定位。我一直在处理这个问题，直到我找到了这个答案，它强调了父元素的
位置：相对
的必要性！这实际上是一种非常酷的方法，可以实现重叠效果，而不必进入绝对/相对定位领域，这可能会扰乱响应性设计。我只需要将一个元素重叠几个像素就可以了！非常简单，完成工作时不必担心“绝对”位置。谢谢