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

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

解决方法

首先，你真的应该包括绝对定位的元素的位置，否则你会遇到奇怪和混乱的行为;你可能想添加top：0; left：0到你的绝对定位的元素的CSS。你也想要有position：relative on .container_row如果你想定位绝对定位的元素 with respect to their parent rather than the document’s body：

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 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”>将具有零的高度。

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

07002

原文链接：https://www.f2er.com/css/222525.html

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

解决方法

猜你在找的CSS相关文章