CSS: 如何在不指定高度的情况下将两个元素放在对方的顶部？

首先，您确实应该将位置包含在绝对定位的元素上，否则您将遇到奇怪和令人困惑的行为; 您可能希望将 top: 0; left: 0添加到您的绝对定位元素的 CSS 中。如果你想让绝对定位的元素定位在 而不是文件的主体上，你还需要在 .container_row上放置 position: relative:

如果元素具有“ position: Absolal”，则包含块由最近的祖先建立，其“ position”为“ Absolal”、“ relant”或“ fix”..。

你的问题是 position: absolute从正常流中删除元素:

它完全从正常流中移除(它对后来的兄弟节点没有影响)。绝对定位框为正常流的子流和绝对(但不是固定的)定位的子流建立一个新的包含块。但是，绝对定位元素的内容不会绕过任何其他盒子。

这意味着绝对定位的元素对其父元素的大小没有任何影响，并且第一个 <div class="container_row">的高度为零。

因此，除非知道绝对定位元素的高度(或者，等效地，可以指定它们的高度) ，否则无法对它们执行所要执行的操作。如果你可以指定的高度，然后你可以把相同的高度对 .container_row和一切将排成一行; 你也可以把一个 margin-top对第二个 .container_row的绝对定位的元素留出空间。例如:

Http://jsfiddle.net/ambiguous/zvbdc/

由于绝对定位将元素从文档流位置移除: 绝对不是作业的正确工具。取决于您想要创建的确切布局，您将成功地使用负边距、位置: 相对或者甚至可能转换。 给我们一个你想做的样本，我们可以更好地帮助你。

很好的回答，“ μ 太短了”。 我也在寻找完全相同的东西，在阅读了你的文章后，我找到了一个解决方案，适合我的问题。

我有两个完全一样大小的元素，想把它们堆起来。 由于每个都有相同的尺寸，我能做的就是

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

只有最后一个元素。通过这种方式，第一个元素被正确地插入，“推”父元素的高度，第二个元素被放置在顶部。

希望这有助于其他人尝试堆叠2 + 元素相同(未知)高度。

当然，问题的关键在于恢复你的身高。但是如果你不提前知道高度，你怎么能做到呢？好的，如果您知道您想给容器提供什么样的长宽比(并保持其响应性) ，那么您可以通过向容器的另一个子级添加填充(以百分比表示)来返回您的高度。

您甚至可以向容器添加一个虚拟 div，并设置类似于 padding-top: 56.25%的内容，以便为虚拟元素提供一个与容器宽度成比例的高度。这将推出容器并给它一个高宽比，在本例中为16:9(56.25%)。

填充和边距使用的宽度的百分比，这是真正的技巧在这里。

我不得不设置

Container _ height = Element1 _ height = Element2 _ height

.Container {
position: relative;
}


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


.ElementOne {
position:absolute;
}


.ElementTwo{
position:absolute;
}

使用可以使用 z-index 来设置哪一个位于顶部。

经过多次测试，我已经验证了原来的问题已经是正确的; 只是缺少一些设置:

• container_row必须有 position: relative;
• 孩子(...) ，必须有 position: absolute; left:0;
• 为了确保孩子们(...)彼此完全对齐, container_row应该有额外的造型:
  • height:x; line-height:x; vertical-align:middle;
  • text-align:center;也能帮上忙。

实际上，这是可能的没有位置 absolute和指定任何高度。您所需要做的就是在父元素上使用 display: grid，并将子元素放入同一行和列中。

.container_row{
display: grid;
}


.layer1, .layer2{
grid-column: 1;
grid-row: 1;
}


.layer1 span{
color: #fff;
background: #000cf6;
}


.layer2{
background: rgba(255, 0, 0, 0.4);
}

<div class="container_row">
<div class="layer1">
<span>Lorem ipsum...<br>Test test</span>
</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>