Какие существуют варианты позиционирования элементов в CSS?

В CSS существует несколько основных вариантов позиционирования элементов:

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

Кроме позиционирования, для расположения элементов часто используют:

• Flexbox — гибкая модель для выравнивания и распределения пространства между элементами в одном измерении (строка или столбец).
• Grid — двумерная сеточная модель для размещения элементов по строкам и столбцам.
• float — устаревший способ обтекания элементов, часто использовался для создания колонок, сейчас применяется реже.

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

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