CSS:如何在不指定高度的情况下将两个元素彼此重叠放置?

问题描述 投票:90回答:9

我有两个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;
}
css
9个回答
79
投票

首先,您确实应该将位置包括在绝对定位的元素上,否则您将遇到奇怪而令人困惑的行为;您可能想为两个绝对定位的元素添加top: 0; left: 0至CSS。如果您想将绝对定位的元素定位在position: relative上,则还需要在.container_row上使用with respect to their parent rather than the document's body

[如果元素具有'位置:绝对',则包含块由最近的祖先建立,其'位置'为'绝对','相对'或'固定'...

您的问题是position: absolute removes elements from the normal flow

将其从正常流中完全删除(它对以后的同级没有影响)。绝对定位的框为正常流子和绝对(但不固定)定位的后代建立了一个新的容纳块。但是,绝对定位的元素的内容不会在其他任何框内流动。

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

因此,如果您不知道绝对定位的元素的高度(或者等效地,可以指定其高度),则无法使用绝对定位的元素进行操作。如果您可以指定高度,则可以在<div class="container_row">上放置相同的高度,所有内容都会对齐;您也可以在第二个.container_row上放置一个margin-top,为绝对定位的元素留出空间。例如:

.container_row


47
投票

实际上,没有位置http://jsfiddle.net/ambiguous/zVBDc/并指定任何高度也是可能的。所有您需要做的是在父元素上使用absolute并将后代放入同一行和同一列。

请根据您的HTML查看下面的示例。我只添加了display: grid和一些颜色,所以您可以看到结果。

您还可以轻松地更改每个后代元素的<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);
}

20
投票

很好的答案,“亩太短了”。我正在寻找完全相同的东西,在阅读您的帖子后,我找到了适合我问题的解决方案。

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

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

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

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


5
投票

我必须设置

Container_height = Element1_height = Element2_height

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

使用可以使用z-index来设置哪个位于最前面。


4
投票

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

.Container {
    position: relative;
}

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

.ElementOne {
    position:absolute;
}

.ElementTwo{
    position:absolute;
}
.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
}

2
投票

由于采用绝对定位,因此从文档流送位置中删除了元素:绝对不是适合此工作的工具。根据要创建的确切布局,您可以使用负边距,position:relative甚至transform:translation实现成功。向我们显示您想做什么的样本,我们可以为您提供更好的帮助。


1
投票

当然,问题全在于恢复身高。但是如果您不提前知道身高怎么办?好吧,如果您知道要为容器提供什么宽高比(并保持其响应速度),则可以通过向容器的另一个子元素中添加填充(以百分比表示)来恢复身高。

您甚至可以向容器中添加虚拟<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>,并设置类似div的值,以使虚拟元素的高度与容器的宽度成比例。这将推出容器并赋予其长宽比,在这种情况下为16:9(56.25%)。

填充和边距使用宽度的百分比,在这里确实是诀窍。


0
投票

经过大量的测试,我已经证实原来的问题已经正确;缺少几个设置:

  • padding-top: 56.25%必须具有container_row
  • 孩子(...),必须有position: relative;
  • 为确保孩子(...)彼此完全对齐,position: absolute; left:0;应具有其他样式:
    • container_row
    • height:x; line-height:x; vertical-align:middle;也可以提供帮助。

0
投票

这里有一些可重用的css,它将在不使用text-align:center;的情况下保留每个元素的高度:

position: absolute

.stack { display: grid; } .stack > * { grid-row: 1; grid-column: 1; } 中的第一个元素是背景,第二个是前景。

© www.soinside.com 2019 - 2024. All rights reserved.