Atr_Max Atr_Max - 1 year ago 63
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 Source

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>