CSS：如何将两个元素放在彼此的顶部，而不指定高度？ [英] CSS: How to position two elements on top of each other, without specifying a height?

问题描述

我有两个DIV，我需要准确地位于彼此的顶部。但是，当我这样做，格式化得到所有困惑，因为包含DIV的行为就像没有高度。我认为这是预期的行为与 position：absolute ，但我需要找到一种方式将这两个元素放在彼此的顶部，并有容器伸展， ：

I have two DIVs that I need to position exactly on top of each other. However, when I do that, the formatting gets all screwed up because the containing DIV acts like there is no height. I think this is the expected behavior with position:absolute but I need to find a way to position these two elements on top of each other and have the container stretch as the content stretches:

.layer2 的左上边缘应与<$ c $的左上边缘完全对齐c> 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;
}

推荐答案

应该包括绝对定位的元素的位置，否则你会遇到奇怪和混乱的行为;你可能想要添加 top：0; left：0 到你的绝对定位的元素的CSS。如果你想将绝对定位的元素定位在位置 c> ， a href =http://www.w3.org/TR/CSS2/visudet.html#containing-block-details>相对于其父级（而不是文档的正文）：

First of all, you really should be including the position on absolutely positioned elements or you will come across odd and confusing behavior; you probably want to add top: 0; left: 0 to the CSS for both of your absolutely positioned elements. You'll also want to have position: relative on .container_row if you want the absolutely positioned elements to be positioned with respect to their parent rather than the document's body:

如果元素具有position：absolute，则包含块由最接近的祖先建立，'position'为'absolute'，'relative'固定'...

If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed' ...

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

Your problem is that position: absolute removes elements from the normal flow:

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

It is removed from the normal flow entirely (it has no impact on later siblings). An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants. However, the contents of an absolutely positioned element do not flow around any other boxes.

这意味着绝对定位的元素没有任何效果对于父元素的大小，您的第一个< div class =container_row> 的高度为零。

This means that absolutely positioned elements have no effect whatsoever on their parent element's size and your first <div class="container_row"> will have a height of zero.

所以你不能做绝对定位的元素，除非你知道他们会有多高（或者，你可以指定他们的高度）。如果你可以指定高度，你可以把相同的高度放在 .container_row ，一切都会排队;您还可以在第二个 .container_row 上放置 margin-top ，以便为绝对定位的元素留下空间。例如：

So you can't do what you're trying to do with absolutely positioned elements unless you know how tall they're going to be (or, equivalently, you can specify their height). If you can specify the heights then you can put the same heights on the .container_row and everything will line up; you could also put a margin-top on the second .container_row to leave room for the absolutely positioned elements. For example:

http：// jsfiddle。 net / ambiguous / zVBDc /

这篇关于CSS：如何将两个元素放在彼此的顶部，而不指定高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！