Как мне поместить содержимое одного div выше соседнего?

Question

[Руслан]

У меня есть 2 div-а. Первый и второй столбцы, как показано на рисунке, В первом столбце есть кнопка, которая показывает третий Div: всплывающее окно. В первом столбце, в коде есть overflow-y: auto Оно есть, потому что первому столбцу нужна вертикальный скролл(много информации) Если его удалить, то и скролла не будет
Я попытался решить проблему следующим образом
Первая колонка

height: calc(100vh - 80px);
    padding: 20px 5px;
    background: #fff;
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.08);
    overflow-y: auto;

Вторая колонка

display: flex;
    flex-direction: column;
    height: 100%;
    margin-left: 10px;
    padding: 17px 0 20px 0;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.08);
    overflow-y: auto;

Pop-up

position: absolute;
    top: -5px;
    left: calc(100% + 5px);
    z-index: 999;

Answer 1

[Сергей delphinpro]

Нужно вынести попап из первой колонки.
Вообще попапы обычно делают прямыми потомками body и размещают в конце всей разметки.