Как можно располагать элементы в CSS?

Располагать элементы в CSS можно несколькими механизмами раскладки — каждый для своей задачи.

Способы

• Обычный поток — блоки друг под другом, строчные элементы в строку. Основа для текста.
• Flexbox — по одной оси: меню, тулбары, выравнивание.
• Grid — по двум осям: макеты страниц, сетки карточек.
• Позиционирование (position) — сдвиг относительно себя (relative), предка (absolute), окна (fixed) или прилипание при прокрутке (sticky): подсказки, модальные окна, шапки.
• Float — обтекание текстом (картинка в статье); для раскладки сейчас не используют.
• Многоколоночная раскладка — columns: 3 для текста в колонках.

.page { display: grid; grid-template-columns: 240px 1fr; }
.toolbar { display: flex; justify-content: space-between; }
.badge { position: absolute; top: -4px; right: -4px; }

Как выбирать

Grid — для общего макета, Flex — внутри блоков, position — для наложений, поток — для текста.

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

Поток, Flexbox, Grid, position, float и колонки; на практике Grid для макета, Flex для компонентов, position для наложений.

Подробнее: MDN — Введение в раскладку CSS