Свойства position в CSS

Свойство position в CSS определяет, как элемент будет располагаться на странице и относительно чего он будет позиционироваться.

Значения свойства position

static

• Значение по умолчанию.
• Элемент располагается в документе согласно потоку.
• Не реагирует на свойства top, right, bottom, left, z-index.

Пример static:

.element {
  position: static;
}

relative

Элемент остаётся в потоке, но его можно сдвинуть с помощью top, right, bottom, left. Пространство, занимаемое элементом, остаётся на месте.

Пример relative:

.element {
  position: relative;
  top: 10px; /* Сдвинет элемент вниз */
}

absolute

Элемент удаляется из потока и позиционируется относительно ближайшего предка с position: relative, absolute, fixed, или sticky. Если такого предка нет, то относительно body. Можно использовать свойства top, right, bottom, left.

Пример absolute:

.container {
  position: relative;
}

.element {
  position: absolute;
  top: 0;
  left: 0; /* Позиционируется относительно контейнера */
}

fixed

Элемент удаляется из потока и закрепляется относительно окна браузера. Не перемещается при прокрутке страницы. Используется для создания фиксированных элементов, таких как шапки или всплывающие меню.

Пример fixed:

.element {
  position: fixed;
  top: 0;
  left: 0;
}

sticky

Элемент ведёт себя как relative, пока его родительский блок находится в видимой области экрана. Позиционируется относительно окна браузера при прокрутке, если пересечёт указанные значения top, right, bottom, left.

.element {
  position: sticky;
  top: 10px; /* Фиксируется, как только достигает 10px от верха экрана */
}

Таблица сравнения