position

Общие сведения

С помощью этого свойства вы можете выбирать то как будет позиционироваться элемент. Он может располагаться в соответствии с нормальным потоком страницы (по умолчанию), вы можете сдвинуть его позицию или «протолкнуть» его в потоке, вы можете позиционировать его относительно другого элемента на странице или позиционировать его относительно всей области просмотра.

Все элементы на странице по умолчанию позиционируются «статично». Статичное позиционирование элемента определяет его расположение на странице в нормальном потоке. Когда элемент упоминается как на позиционированный элемент, это означает что его свойство position было изменено со static на одно из четырёх доступных значений: relative, absolute, fixed, sticky.

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

Синтаксис свойства

• Синтаксис:

  position: static | relative | absolute | sticky | center | page | fixed

• Значение по умолчанию: static
• Применяется: ко всем элементам
• Наследуется: нет
• Анимируется: нет

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

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

Поддержка браузерами

Основные значения свойства position работают во всех основных браузерах.

Поддержка браузерами position:fixed

Поддержка браузерами position:sticky

Пример