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

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

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

Пример:

.element {
  position: absolute;
  top: 10px;
  left: 20px;
}