Question

我们有这种奇怪的情况，我们有以下DOM：

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

我们现在希望container2出现在ABOVE container1上。通常，两个容器都是彼此相邻的包装，container1是主要内容，container2是侧边栏。

补充工具栏必须是主要内容。两个元素的高度都未知。

我该如何解决这个问题？

Answer 1

尝试使用display：flex和order。

＆＃13;

main{
   display: flex;
  flex-direction: column;
}


div{
  height: 100px;
  width: 100px;
}

.first{
   background: blue;
  order: 2;
}

.second{
  background: red;
  order: 1;
}

＆＃13;

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

＆＃13;

Answer 2

在他们将叠加的两个div上使用position: absolute

将元素放在另一个元素上

2 个答案: