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

Способы позиционирования (`position`): static, relative, absolute, fixed, sticky. Выбор — по тому, относительно чего размещать и должен ли элемент участвовать в потоке.

Виды и когда выбирать

static (по умолчанию)

Обычный поток, смещения не работают.

• Когда: обычные элементы (дефолт).

relative

В потоке (место сохраняется), можно сместить относительно себя; создаёт контекст для absolute-потомков.

.el { position: relative; top: 10px; }

• Когда: небольшое смещение, якорь для absolute-детей.

absolute

Вне потока, относительно ближайшего позиционированного предка (или <html>).

.parent { position: relative; }
.child { position: absolute; top: 0; right: 0; }

• Когда: оверлеи, тултипы, бейджи, точное размещение внутри контейнера.

fixed

Вне потока, относительно viewport — не двигается при скролле.

.header { position: fixed; top: 0; }

• Когда: липкие хедеры, кнопки «наверх», модалки.

sticky

Гибрид relative/fixed: relative до порога скролла, затем прилипает.

.nav { position: sticky; top: 0; }

• Когда: липкие заголовки секций/навигация в пределах контейнера.

Как выбирать

• Обычный элемент → static.
• Смещение / якорь для absolute → relative.
• Точное размещение вне потока → absolute.
• Фиксация относительно окна → fixed.
• Прилипание при скролле → sticky.

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

Позиционирование: static (поток, дефолт), relative (смещение относительно себя, якорь для absolute), absolute (вне потока, относительно позиционированного предка — оверлеи), fixed (вне потока, относительно viewport — липкие хедеры), sticky (relative до порога, потом прилипает). Выбор по точке отсчёта и участию в потоке.