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

Question

我有两个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;
}

Answer 1

首先,你真的应该把位置包括在绝对定位的元素上,否则你会遇到奇怪而混乱的行为; 您可能希望top: 0; left: 0为两个绝对定位的元素添加CSS.你也想拥有position: relative的.container_row,如果你想绝对定位的元素被定位相对于他们的父母,而不是文档的身体:

如果元素具有'position:absolute',则包含块由最近的祖先建立,其'position'为'absolute','relative'或'fixed'...

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

它完全从正常流程中移除(它对后来的兄弟姐妹没有影响).绝对定位的框为正常流动子项和绝对(但不是固定)定位后代建立新的包含块.但是,绝对定位元素的内容不会围绕任何其他框流动.

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

因此,除非你知道它们的高度(或者,相当于你可以指定它们的高度),否则你不能用绝对定位的元素做你想做的事情.如果你可以指定高度,那么你可以把相同的高度放在一起.container_row,一切都会排成一行; 你也可以放在margin-top第二个.container_row为绝对定位的元素留出空间.例如:

http://jsfiddle.net/ambiguous/zVBDc/

Answer 2

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

请根据您的HTML检查以下示例.我只添加了<span>一些颜色,所以你可以看到结果.

您还可以轻松更改z-index每个后代元素,以操纵其可见性(哪一个应位于顶部).

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

Answer 3

很好的答案,"亩太短".我正在寻找完全相同的东西,在阅读你的帖子后,我发现了一个适合我的问题的解决方案.

我有两个完全相同大小的元素,想要堆叠它们.由于每个都有相同的尺寸,我能做的就是做

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

仅在最后一个元素上.这样,第一个元素正确插入,"推"父母高度,第二个元素放在顶部.

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

Answer 4

这是使用 display: flex 而不是 position: absolute 或 display: grid 的另一种解决方案。

.container_row{
  display: flex;
}

.layer1 {
  width: 100%;
  background-color: rgba(255,0,0,0.5);  // red
}

.layer2{
  width: 100%;
  margin-left: -100%;
  background-color: rgba(0,0,255,0.5);  // blue
}

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

Answer 5

这是一些可重用的 css，它们将保留每个元素的高度而不使用position: absolute：

.stack {
    display: grid;
}
.stack > * {
    grid-row: 1;
    grid-column: 1;
}

你的第一个元素stack是背景，第二个是前景。

Answer 6

我必须设置

容器高度 = 元素 1_高度 = 元素 2_高度

.Container {
    position: relative;
}

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

.ElementOne {
    position:absolute;
}

.ElementTwo{
    position:absolute;
}

使用可以使用 z-index 来设置哪一个在最上面。