Cвойство position задаёт способ позиционирования элемента в документе. Совместно со свойствами left, right, top, bottom элементу задаётся его местоположение на странице. position указывает тип метода позиционирования, используемого для элемента (static, relative, absolute, fixed, или sticky).

Static

Значение по умолчанию. Статичное позиционирование. Любой элемент, добавленный на страницу, будет иметь это значение и будет расположен в нормальном потоке документа согласно контексту форматирования родительского элемента. Свойства left, right, top, bottom и z-index игнорируются.

Relative

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

Absolute

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

• Элемент убирается из основного потока документа. То есть перестаёт влиять на положение окружающих элементов и на размер родителя. Можно представить себе, что элемент уходит на слой выше и перестаёт взаимодействовать со всеми элементами, кроме своих потомков.
• Элемент позиционируется относительно ближайшего позиционированного предка. То есть браузер идёт вверх по дереву элементов и ищет ближайшего опорного родителя. И затем располагает наш элемент относительно этого родителя.
• Если элемент был блочным и занимал всю ширину своего родителя, то теперь его ширина будет определяться шириной контента.

Fixed

Иногда требуется позиционировать элемент не относительно родителя, а относительно окна браузера. Для решения подобной задачи подходит position: fixed. Свойство так же, как и предыдущее, работает с указанием смещения left, right, top, bottom. У такого способа позиционирования есть ряд особенностей:

• Элемент убирается из основного потока документа. То есть перестаёт влиять на положение окружающих элементов и на размер родителя. Можно представить себе, что элемент уходит на слой выше и перестаёт взаимодействовать со всеми элементами, кроме своих потомков.
• Элемент позиционируется относительно окна браузера, за исключением случаев, если один из родителей имеет значения свойств transform, perspective или filter, отличные от none. В этом случае блок становится опорным, и позиционирование будет производиться уже относительно него, а не окна браузера.

Sticky

Элемент позиционируется в нормальном потоке так же, как и статичный, а затем смещается при помощи свойств left, right, top, bottom относительно ближайшего родителя, имеющего прокрутку. Это свойство применяется, когда нам нужно зафиксировать какой-либо элемент не сразу, а при прокрутке родителя до какого-то известного положения.

Синтаксис

Пример

⇓Результат данного примера показан на рисунке⇓