如何在不更改当前 HTML 结构的情况下使用 css 将底部元素对齐（不覆盖）顶部元素

Question

我想在父元素顶部对齐 HTML 文件中的底部元素，我不想覆盖它，我真的希望底部元素位于顶部元素的顶部：

示例：HTML：

<div class="top-container"></div>
<div class="bottom-container"></div>

CSS：

.top-container {
    width: 200px;
    height: 200px;
    background-color: green;
}

.bottom-container {
    width: 200px;
    height: 200px;
    background-color: red;
}

当前 Output：

预期 output：我希望红框在绿框上方。

Answer 1

如果可以将两个元素包裹在一个div中，如果还没有包裹，那么在容器元素中， display: flex; flex-direction:column-reverse; display: flex; flex-direction:column-reverse; ...如果真的没有容器元素，你最好的选择是position: relative on the bottom element and bottom: 400px 。 他们不会交换位置，但红色的会在绿色的上面。