Put элемент ВЫШЕ другой элемент

Question

мы имеем эту странную ситуацию, когда мы имеем следующий DOM:

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

Теперь мы хотим, что container2 появляется ВЫШЕ container1. Как правило, оба контейнера являются оберткой рядом друг с другом, container1 является основным содержимым, а container2 является боковой панелью.

Боковая панель должна быть над основным контентом. Оба элемента имеют неизвестную высоту.

Как это исправить?

Answer 1

Попробуйте с дисплеем: сгибать и порядок.

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>

Answer 2

Использование position: absolute на обоих дивы они складывают