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

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.

css

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

css

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

css

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

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

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