Какие бывают варианты позиционирования элементов на странице (CSS position)?

Что такое CSS position?

Свойство position в CSS управляет тем, как элемент размещается в потоке документа и относительно других элементов. Оно является основой для создания сложных макетов, наложения элементов, фиксированных шапок и выпадающих меню. Без понимания этого свойства невозможно эффективно верстать адаптивные и интерактивные интерфейсы.

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

• 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: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.header {
  position: fixed;
  top: 0;
  width: 100%;
}

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

Как это работает на практике

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

Вывод

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