Основные варианты позиционирования:

static
relative
absolute
fixed
sticky

Они определяются свойством position.

static (значение по умолчанию): Элемент находится в нормальном потоке документа, игнорируя свойства top, right, bottom, left, z-index.

relative: Элемент позиционируется относительно своего обычного положения в нормальном потоке. Свойства top, right, bottom, left сдвигают его, но занимаемое им место в потоке не меняется. Может служить позиционирующим контекстом для абсолютно позиционированных потомков.

absolute: Элемент полностью удаляется из нормального потока документа. Он позиционируется относительно своего ближайшего позиционированного предка (не static). Если таких предков нет, позиционируется относительно начального блока (обычно <html>). Положение задается с помощью top, right, bottom, left.

/* Пример absolute позиционирования */
.parent {
  position: relative; /* Родитель становится позиционирующим контекстом */
}

.child {
  position: absolute;
  top: 0;
  left: 0; /* Позиционируется относительно левого верхнего угла родителя */
}

fixed: Элемент полностью удаляется из нормального потока документа. Он позиционируется относительно видимой области окна браузера (viewport). Положение задается с помощью top, right, bottom, left. Остается на месте при прокрутке страницы.

/* Пример fixed позиционирования */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; /* Занимает всю ширину viewport */
}

sticky: Гибрид relative и fixed. Элемент ведет себя как relative до достижения определенной точки при прокрутке, после чего становится fixed. Позиционирующая точка определяется свойствами top, right, bottom, left.

/* Пример sticky позиционирования */
.sticky-element {
  position: sticky;
  top: 10px; /* Элемент становится "липким" при прокрутке до 10px от верха viewport */
}

Дополнительные свойства, связанные с позиционированием:

z-index: Управляет порядком наложения позиционированных элементов. Элемент с более высоким z-index накладывается поверх элементов с более низким z-index.
top, right, bottom, left: Определяют смещение позиционированного элемента от соответствующего края его позиционирующего контекста.

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