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。如果您希望定位绝对定位的元素with respect to their parent rather than the document's body，您还希望在position: relative上设置.container_row：

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

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

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

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

所以除非你知道它们的高度（或者，相当于你可以指定它们的高度），否则你不能用绝对定位的元素做你想做的事情。如果你可以指定高度，那么你可以在.container_row上设置相同的高度，一切都会排成一行;您还可以在第二个margin-top上放置一个.container_row，为绝对定位的元素留出空间。例如：

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

Answer 2

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

我有两个完全相同大小的元素，想要堆叠它们。由于每个都有相同的大小，我能做的就是制作

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

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

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

Answer 3

实际上，在没有位置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 4

这里有一些可重用的css，它将保留每个元素的高度，而无需使用position: absolute：

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

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

Answer 5

我必须设置

Container_height = Element1_height = Element2_height

.Container {
    position: relative;
}

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

.ElementOne {
    position:absolute;
}

.ElementTwo{
    position:absolute;
}

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

Answer 6

由于绝对定位从文档流位置移除元素：绝对不是作业的正确工具。根据您要创建的确切布局，您将成功使用负边距，位置：相对或甚至变换：translate。向我们展示您想要做的事情的样本，我们可以帮助您更好。

Answer 7

这是另一种使用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 8

当然，问题在于让你的身高恢复正常。但是如果你不提前知道高度怎么办？好吧，如果您知道要为容器提供的宽高比（并保持响应），您可以通过向容器的另一个子容器添加填充来获得高度，以百分比表示。

您甚至可以向容器中添加一个虚拟div并设置类似padding-top: 56.25%的内容，以便为虚拟元素提供一个高度，该高度是容器宽度的一部分。这将推出容器并给它一个纵横比，在这种情况下为16：9（56.25％）。

填充和边距使用宽度的百分比，这就是诀窍。

Answer 9

经过多次测试，我已经确认原来的问题已经是正确的;缺少几个设置：

container_row必须有position: relative;
孩子们（......），必须有position: absolute; left:0;
确保孩子们（...）完全对齐，... container_row应该有其他样式：
- height:x; line-height:x; vertical-align:middle;
- text-align:center;也可以提供帮助。

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

9 个答案: