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

По умолчанию элементы выстраиваются в потоке документа: блоки один под другим, строчные — друг за другом в строке. Свойство position позволяет выйти из этого порядка — сдвинуть элемент, наложить его поверх соседей или закрепить на экране. Координаты задают свойствами top, right, bottom, left или их сокращением inset.

Пять значений и от чего они отсчитываются

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

Пример: метка на карточке товара

.card {
  position: relative; /* точка отсчёта для метки */
}
.card__badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

Без position: relative у карточки метка «Скидка» улетит в угол ближайшего позиционированного предка или страницы — классическая ошибка начинающих.

Частые сюрпризы

• Fixed ведёт себя как absolute. Если у предка есть transform, filter или perspective, он становится точкой отсчёта и для фиксированных потомков, и закреплённая кнопка уезжает вместе с блоком.
• Sticky не прилипает. Обычно мешает предок с overflow: hidden или auto: прилипание работает внутри ближайшей прокручиваемой области. Другие причины — не задан top или родитель по высоте равен самому элементу, и двигаться некуда.
• Не помогает z-index. Порядок наложения действует внутри контекста наложения: элемент не поднимется выше блока из другого контекста, сколько ни увеличивай число.