Позиционирование: relative, absolute, fixed, sticky

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

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

position: relative оставляет элемент в нормальном потоке, но позволяет смещать его относительно исходного положения с помощью top, right, bottom и left. Важно, что это создаёт контекст позиционирования для абсолютно позиционированных дочерних элементов.

position: absolute удаляет элемент из обычного потока. Элемент позиционируется относительно ближайшего предка с позиционированием (с любым значением position, кроме static). Если предка с позиционированием нет, элемент позиционируется относительно области просмотра.

Позиционированные элементы могут перекрываться. Используйте z-index, чтобы управлять порядком наложения. Чем выше значение z-index, тем выше располагается элемент. Свойство работает только для позиционированных элементов (но не для static). Оно создаёт новый контекст наложения.

position: fixed удаляет элемент из обычного потока и прикрепляет его к области просмотра. При прокрутке страницы он не перемещается. Это идеально подходит для закреплённых заголовков, плавающих кнопок действий и баннеров с уведомлением о файлах cookie.

position: sticky объединяет два поведения: элемент прокручивается вместе со страницей, пока не достигнет порогового значения (заданного верхней или нижней границей), а затем закрепляется. Это удобно для заголовков разделов в длинных таблицах или боковых панелей, которые закрепляются после заголовка.

Классический приём: объедините position: absolute; top: 50%; left: 50% с transform: translate(-50%, -50%), чтобы идеально расположить элемент по центру его позиционированного родителя.

Абсолютно позиционированный дочерний элемент по умолчанию может выходить за границы родителя. Если добавить родителю overflow: hidden, всё за пределами его блока будет обрезано — это удобно для эффектов с изображениями на карточках и обрезки значков.

Некоторые свойства непреднамеренно создают контексты наложения: transform, filter, isolation: isolate. Это может привести к конфликтам z-index: элемент со значением z-index: 9999 всё равно окажется позади другого элемента, если он находится внутри контекста наложения более низкого уровня.

Относительное позиционирование: смещения и создание контекста позиционирования. Абсолютное позиционирование: значки, всплывающие подсказки и наложения относительно родителя. Фиксированное позиционирование: постоянные заголовки, модальные окна и всплывающие уведомления. Липкое позиционирование: заголовки разделов и навигация боковой панели, следующая за прокруткой. Не используйте position для создания макетов — применяйте Flex или Grid.

Элемент имеет position: absolute; top: 0; right: 0;. Где он окажется, если его родитель имеет position: relative?

static используется по умолчанию. relative задаёт смещение без выхода из потока и создаёт контекст позиционирования. absolute выводит элемент из потока и позиционирует его относительно ближайшего предка с позиционированием. fixed прикрепляет элемент к области просмотра. sticky прокручивается, а затем закрепляется. Используйте z-index, чтобы управлять порядком перекрытия.