Atr_Max Atr_Max - 3 months ago 9
CSS Question

Put element ABOVE another element

we have this weird situation where we have the following DOM:

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


We now want that container2 appears ABOVE container1.
Normally, both containers are wrapper beside each other,
container1
is the main content and
container2
is the sidebar.

The Sidebar has to be OVER the main content. Both elements have an unknown height.

How can I fix this?

Answer

Try with display: flex and 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>