CSS：如何在不指定高度的情况下将两个元素放置在彼此的顶部？

我有两个div，我需要将它们精确地放置在彼此的顶部。但是，当我这样做时，格式会变得一团糟，因为包含DIV的行为就像没有高度一样。我认为这是

position:absolute

的预期行为，但我需要找到一种方法将这两个元素放置在彼此的顶部，并在内容拉伸时使容器拉伸：

.layer2

的左上边缘应与

layer1的左上边缘对齐

<!-- HTML -->
<div class="container_row">
    <div class="layer1">
        Lorem ipsum...
    </div>
    <div class="layer2">
        More lorem ipsum...
    </div>
</div>
<div class="container_row">
    ...same HTML as above. This one should never overlap the .container_row above.
</div>

/* CSS */
.container_row {}

.layer1 {
    position:absolute;
    z-index: 1;
}

.layer2 {
    position:absolute;
    z-index: 2;
}


乱数假文。。。
更多的知识。。。
…与上面相同的HTML。这一行不应与上面的.container\u行重叠。
/*CSS*/
.container_行{}
.第1层{
位置：绝对位置；
z指数：1；
}
.第二层{
位置：绝对位置；
z指数：2；
}
首先，你真的应该在绝对定位的元素上包含位置，否则你会遇到奇怪和混乱的行为；您可能需要添加
top:0；左：0
添加到CSS中，用于两个绝对定位的元素。如果要定位绝对定位的元素，还需要在
.container\u行
上设置
position:relative
：

如果元素具有“位置：绝对”，则包含的块由最近的祖先建立，其“位置”为“绝对”、“相对”或“固定”

你的问题是：

它将完全从正常流中移除（对以后的同级没有影响）。绝对定位框为正常流子对象和绝对（但不是固定）定位的子对象建立新的包含块。但是，绝对定位元素的内容不会在任何其他框中流动

这意味着绝对定位的元素对其父元素的大小没有任何影响，并且第一个
的高度为零

因此，除非您知道绝对定位元素的高度（或者，等效地，您可以指定它们的高度），否则无法对绝对定位元素执行您试图执行的操作。如果您可以指定高度，那么您可以在
.container\u行
上放置相同的高度，所有内容都将对齐；您还可以在第二排
.container\u
上放置一个
边距顶部
，为绝对定位的元素留出空间。例如：


由于绝对定位，从文档流中删除元素位置：绝对不是作业的正确工具。根据您想要创建的确切布局，您将成功地使用负边距、position:relative甚至transform:translate。
给我们一个你想做什么的例子，我们可以帮助你更好。
很好的回答，“mu太短了”。
我在寻找完全相同的东西，在阅读了你的帖子后，我找到了一个适合我的问题的解决方案

我有两个大小完全相同的元素，想把它们叠起来。
因为每个都有相同的尺寸，我能做的就是

position: absolute;
top: 0px;
left: 0px;

仅在最后一个元素上。这样，第一个元素被正确插入，“推”父元素的高度，第二个元素被放置在顶部

希望这能帮助其他人尝试以相同（未知）高度堆叠2+个元素。
当然，问题在于如何恢复你的高度。但是如果你事先不知道高度，你怎么能做到呢？好的，如果你知道你想要给容器什么样的纵横比（并保持它的响应性），你可以通过给容器的另一个子容器添加填充物来恢复你的高度，用百分比表示

您甚至可以向容器中添加一个虚拟
div
，并设置类似
padding top:56.25%
的内容，以使虚拟元素的高度与容器的宽度成比例。这将推出容器并使其具有纵横比，在本例中为16:9（56.25%）

填充和边距使用宽度的百分比，这才是真正的诀窍。
我必须设置

容器高度=元件1高度=元件2高度

.Container {
    position: relative;
}

.ElementOne, .Container ,.ElementTwo{
    width: 283px;
    height: 71px;
}

.ElementOne {
    position:absolute;
}

.ElementTwo{
    position:absolute;
}

Use可以使用z-index设置哪一个位于顶部。
经过多次测试，我已经验证了原来的问题已经正确；缺少几个设置：


容器行
必须有
位置：相对

子项（…），必须具有
位置：绝对；左：0

为了确保子项（…）彼此精确对齐
容器行
应具有其他样式：

高度：x；线高：x；垂直对齐：中间对齐

文本对齐：居中也可以提供帮助


实际上，这是可能的，而无需位置
绝对
和指定任何高度。您需要做的就是在父元素上使用
显示：网格
，并将子元素放在同一行和同一列中

请根据您的HTML检查下面的示例。我只添加了
和一些颜色，因此您可以看到结果

您还可以轻松地更改每个子元素的
z-index
，以操纵其可见性（哪个应该在顶部）


.container\u行{
显示：网格；
}
.layer1、.layer2{
网格柱：1；
网格行：1；
}
.第1层跨度{
颜色：#fff；
背景：#000cf6；
}
.第二层{
背景：rgba（255,0,0,0.4）；
}

Lorem ipsum…
测试
更多的知识。。。
…与上面相同的HTML。这一行不应与上面的.container\u行重叠。
这里有另一个使用display:flex而不是position:absolute或display:grid的解决方案


.container\u行{
显示器：flex；
}
.第1层{
宽度：100%；
背景色：rgba（255,0,0,0.5）；//红色
}
.第二层{
宽度：100%；
左边距：-100%；
背景色：rgba（0,0255,0.5）/