CSS-свойство position

CSS-свойство position указывает, как позиционируется элемент относительно других элементов в документе.

Значение по умолчанию:	`static`
Применяется к:	Все элементы
Наследование:	Нет
Анимирование:	Нет. Анимируемые свойства
Версия:	CSS 2, 3

Элементы с position, отличным от static, называются позиционированными (positioned). Их наложение друг на друга определяется свойством z-index.

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

position: static | relative | absolute | fixed | sticky | initial | inherit

Примеры написания кода свойства position:

h1 {
    position: absolute;
    top: 100px;
    left: 150px;
}

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение	Описание
`static`	Элементу задется свойство нормального потока, элементы располагаются в том порядке, в котором объявлены в DOM. Это значение установлено по умолчанию.
`relative`	Элемент позиционируется относительно его нормального положения (это называется положением в нормальном потоке).
`absolute`	Элемент позиционируется относительно своего первого родителя, значение позиции которого отличается от `static`.
`fixed`	Элемент фиксируется относительно области просмотра экрана и не перемещается при прокрутке. При печати элемент печатается на каждой странице.
`sticky`	Элемент расположен аналогично относительно (relative) позиционированного блока, и он «прилипает» (sticks) к ближайшему предку, у которого есть «механизм прокрутки» (scrolling).
`initial`	Устанавливает это свойство в значение по умолчанию.
`inherit`	Если указан, связанный элемент принимает вычисленное значение своего родительского элемента `position`.