Позиционирование

💡 Объяснение

Нормальный поток

Обычно браузер расставляет элементы по порядку, как слова в тексте: блоки — сверху вниз, строчные элементы — слева направо. Это называется нормальным потоком. Элементы уважают друг друга и не залезают на соседей.

Но иногда нужно положить элемент поверх другого: бейдж «Новинка» в углу карточки, подпись поверх фото, кнопку «Наверх», которая всегда висит в углу экрана, липкое меню. Для этого есть свойство position.

Значения position

• static — обычное положение в потоке (так у всех элементов по умолчанию). Координаты не работают.
• relative — элемент остаётся на своём месте в потоке, но его можно немного сдвинуть координатами. Главное применение — стать точкой отсчёта для детей с absolute.
• absolute — элемент вынимается из потока (соседи его «не замечают» и занимают его место) и ставится по координатам относительно ближайшего родителя, у которого position не static. Если такого нет — относительно всей страницы.
• fixed — элемент прибит к окну браузера и не двигается при прокрутке.
• sticky — ведёт себя как обычный, пока не доедет до края экрана при прокрутке, а потом «прилипает». Удобно для меню и заголовков таблиц.

Координаты

top, right, bottom, left — расстояние от соответствующего края точки отсчёта. top: 10px; right: 10px; — «10 пикселей от верха и 10 от правого края», то есть правый верхний угол.

left: 0; right: 0; одновременно растягивают элемент на всю ширину родителя.

Рецепт бейджа на карточке

.card {
  position: relative;   /* точка отсчёта */
}
.badge {
  position: absolute;   /* вынули из потока */
  top: 10px;
  right: 10px;          /* правый верхний угол карточки */
}

Запомни пару: родителю relative, ребёнку absolute. Если забыть relative у карточки, бейдж «улетит» в угол всей страницы.

Подпись поверх картинки

.caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
}

Полупрозрачный фон rgba делает текст читаемым на любой картинке.

Кнопка «Наверх» и липкое меню

.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
}
.menu {
  position: sticky;
  top: 0;
}

Для sticky обязательно указать, у какого края прилипать (top: 0), и дать фон — иначе текст страницы будет просвечивать сквозь меню.

z-index: кто сверху

Когда элементы накладываются, возникает вопрос: кто закрывает кого? Представь стопку листов на столе. z-index — это номер листа в стопке: чем больше число, тем ближе к тебе.

• z-index работает только у элементов с position relative, absolute, fixed или sticky.
• Без z-index сверху оказывается тот, кто написан в HTML позже.
• Не нужно писать z-index: 99999 — хватит 1, 2, 10.

Когда position не нужен

Не используй absolute для обычной раскладки страницы (колонки, карточки в ряд) — элементы начнут налезать друг на друга, особенно на телефоне. Для раскладки есть Flexbox и Grid. position — только для «наклеек» поверх.

Частые ошибки

• Забыли position: relative у родителя — absolute-элемент уехал в угол страницы.
• Написали координаты без position — ничего не происходит.
• z-index без position — не работает.
• Липкое меню без top — не прилипает.

Проверь себя

1. Чем absolute отличается от fixed?
2. Что нужно написать родителю, чтобы бейдж встал в угол карточки?
3. У двух элементов z-index 5 и 10. Какой будет сверху?