Сравни способы позиционирования Div и объясни, когда выбирать каждый вариант.

Позиционировать div можно через поток, Flexbox, Grid или свойство position — каждый способ под свою задачу.

Способы

• Обычный поток — блок встаёт под предыдущим. Для статей и простых страниц.
• Flexbox — расположить в ряд или колонку, выровнять, распределить место. Для меню, тулбаров, карточек.
• Grid — разместить по строкам и колонкам. Для макетов и сеток.
• `position: relative` — небольшой сдвиг с сохранением места, опора для absolute-детей.
• `position: absolute` — точное положение внутри предка, без места в потоке. Для бейджей, подсказок, кнопок закрытия.
• `position: fixed` — привязка к окну. Для модальных окон, плавающих кнопок.
• `position: sticky` — прилипает при прокрутке. Для шапок и заголовков таблиц.

.layout { display: grid; grid-template-columns: 240px 1fr; }
.actions { display: flex; gap: 8px; justify-content: flex-end; }
.close { position: absolute; top: 8px; right: 8px; }

Как выбирать

Раскладку страницы и блоков — Grid и Flexbox; наложения и закрепления — position.

Коротко для собеседования

Grid и Flexbox — для раскладки, relative/absolute — для наложений внутри блока, fixed — к окну, sticky — для прилипающих элементов.

Подробнее: MDN — Раскладка CSS