javascript - 如何在不更改当前 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;
}

电流输出：

预期输出：我希望红色框位于绿色框上方。

标签： javascripthtmlcsstwitter-bootstrapfrontend

Answer 1

如果您可以将两个元素包装在 div 中，如果它们尚未包装，则在容器元素中，display: flex; flex-direction:column-reverse;...如果真的没有容器元素，您最好的选择是position: relative底部元素和bottom: 400px. 他们不会交换位置，但红色的会在绿色的上面。