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

position

CSS position

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

CSS position:fixed

IE
9
0.13%
10
0.1%
11
2.71%
Edge
15
0.08%
16
1.28%
17
0.36%
18
0%
Firefox
58
0.07%
59
1.98%
60
1.64%
61
0.07%
62
0%
Chrome
64
0.34%
65
1.92%
66
23.09%
67
0.19%
68
0.04%
Safari
10.1
0.27%
11
0.39%
11.1
1.3%
12
0%
TP
0%
iOS Safari
10.3
0.72%
11.0-11.2
2.13%
11.3
5.99%
Chrome for Android
66
30.44%

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

CSS position:sticky

IE
9
0.13%
10
0.1%
11
2.71%
Edge
15
0.08%
16
1.28%
17
0.36%
18
0%
Firefox
58
0.07%
59
1.98%
60
1.64%
61
0.07%
62
0%
Chrome
64
0.34%
65
1.92%
66
23.09%
67
0.19%
68
0.04%
Safari
10.1
0.27%
11
0.39%
11.1
1.3%
12
0%
TP
0%
iOS Safari
10.3
0.72%
11.0-11.2
2.13%
11.3
5.99%
Chrome for Android
66
30.44%

Пример