Что такое свойство position в CSS? Какие значения оно имеет (static, relative, absolute, fixed, sticky) и как они работают?

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

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

• static — значение по умолчанию. Элемент располагается в нормальном потоке документа, свойства top, left, bottom, right не применяются.

• relative — элемент позиционируется относительно своего нормального положения. Можно смещать элемент с помощью top, left, bottom, right, при этом он занимает исходное место в потоке, и пространство под него сохраняется.

• absolute — элемент позиционируется относительно ближайшего предка с позиционированием отличным от static (если такого нет — относительно окна браузера). Элемент выводится из нормального потока, не занимает места, и смещается с помощью top, left, bottom, right.

• fixed — элемент фиксируется относительно окна браузера и не двигается при прокрутке страницы. Также выводится из потока.

• sticky — гибрид relative и fixed. Элемент ведет себя как relative до тех пор, пока не достигнет заданного порога прокрутки (например, top: 0), после чего становится фиксированным.

Пример использования:

.element {
  position: sticky;
  top: 0;
  background: white;
}

Этот элемент будет прилипать к верхней части окна при прокрутке.