Все справочники находятся в стадии наполнения. Если у вас есть идеи на счёт того как улучшить этот раздел, то вы можете оставить комментарий под конкретной записью или написать свои предложения по адресу [email protected].

position

CSSposition
mangohost

Свойство 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

CSS position:fixed

IE
9
0.09%
10
0.01%
11
0.44%
Edge
105
0.8%
106
3.08%
107
0.25%
Firefox
104
0.07%
105
1.51%
106
0.68%
107
0.01%
108
0%
Chrome
105
6.01%
106
15.7%
107
0.64%
108
0.02%
109
0.01%
Safari
15.6
1.63%
16.0
0.5%
16.1
0.07%
16.2
0%
TP
0%
Safari on iOS
15.6
6.72%
16.0
4.55%
16.1
0.24%
Chrome for Android
107
40.28%

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

CSS position:sticky

IE
9
0.09%
10
0.01%
11
0.44%
Edge
105
0.8%
106
3.08%
107
0.25%
Firefox
104
0.07%
105
1.51%
106
0.68%
107
0.01%
108
0%
Chrome
105
6.01%
106
15.7%
107
0.64%
108
0.02%
109
0.01%
Safari
15.6
1.63%
16.0
0.5%
16.1
0.07%
16.2
0%
TP
0%
Safari on iOS
15.6
6.72%
16.0
4.55%
16.1
0.24%
Chrome for Android
107
40.28%

Пример

mangohost