Расскажи про свойство position в CSS: какие есть значения и как они работают?

Свойство position в CSS определяет способ позиционирования элемента на странице. Основные значения:

• static (по умолчанию): элемент располагается в нормальном потоке документа, игнорируются свойства top, left и т.д.
• relative: элемент позиционируется относительно своего нормального положения; можно смещать с помощью top, left, но он занимает место в потоке.
• absolute: элемент позиционируется относительно ближайшего предка с позиционированием (relative, absolute, fixed), или относительно окна, если таких нет; элемент выводится из нормального потока.
• fixed: элемент фиксируется относительно окна браузера и не двигается при прокрутке; тоже выводится из потока.
• sticky: элемент ведёт себя как relative до тех пор, пока не достигнет заданной позиции при прокрутке, после чего фиксируется как fixed.

Пример:

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

Этот блок будет смещён на 20px вниз и 30px вправо относительно ближайшего позиционированного предка.