Какие бывают значения у CSS-свойства position?

Что такое CSS position?

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

Основные значения

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

Пример кода

.box {
  position: relative;
  top: 20px;
  left: 30px;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

Как это применяется на практике

Знание position необходимо для создания модальных окон, выпадающих меню, фиксированных шапок, тултипов и сложных макетов. Например, absolute часто используется для наложения элементов друг на друга, а sticky — для закрепления заголовков таблиц при прокрутке.

Вывод

Понимание всех значений position — базовая компетенция фронтенд-разработчика. Используйте relative для точной подстройки, absolute для позиционирования внутри контейнера, fixed для постоянных элементов интерфейса и sticky для элементов, которые должны оставаться видимыми при прокрутке.