css - 将元素放在另一个元素之上

Question

我们遇到了以下 DOM 的奇怪情况:

<div class="container1"> ... </div>
<div class="container2"> ... </div>

我们现在希望 container2 出现在 container1 之上。 通常情况下，两个容器都是相互包装的，container1 是主要内容，container2 是侧边栏。

侧边栏必须覆盖主要内容。两个元素的高度都未知。

我该如何解决这个问题？

Answer 1

尝试使用 display: flex 和 order。

main{
   display: flex;
  flex-direction: column;
}


div{
  height: 100px;
  width: 100px;
}

.first{
   background: blue;
  order: 2;
}

.second{
  background: red;
  order: 1;
}

<main>
<div class="first"></div>
<div class="second"></div>
</main>