Определяет то, как будет расположен элемент на странице. Часто применяется в сочетании со свойствами top, right, bottom, left.
Примеры
Значения
Значение | Описание |
---|---|
static | По умолчанию. Элемент располагается в порядке, который идет в документе. Свойства top , right , bottom , left , z-index не применяются. |
absolute | Абсолютное позиционирование. Элемент удаляется из потока и перестает занимать место. Расположение задается свойствами top , right , bottom , left . Расположение происходит либо от всего документа, либо от родительского блока, если у него задано позиционирование отличное от static. |
fixed | Фиксированное позиционирование. Элемент удаляется из потока и перестает занимать место в документе, но в отличии от absolute , расположение происходит относительно окна браузера и при прокручивании страницы не меняет своего расположения, всегда остается на одном месте. |
relative | Относительное позиционирование. Элемент располагается как обычно в документе, занимает свое место. Но при этом можно задать смещение с помощью top , right , bottom , left и оно не вызовет смещение других блоков, |
sticky | Закрепленное/липкое позиционирование. Сочетание относительного и фиксированного позиционирования. Элемент располагается как обычно в документе, занимает место. Но при прокручивании страницы/родительского блока элемент фиксируется и остается все время на экране, при этом не влияет на расположение других блоков. Работает в связке со свойствами top , right , bottom , left .⚠️ Не поддерживается в IE/Edge 15 или младше. Работает в Safari с версии 6.1 с префиксом -webkit- . |
Поддержка браузерами
НастольныеМобильные
position
1
12
1
4
4
1
18
4
14
1
1.0
≤37
Абсолютно спозиционир. флекс элементы
52
12
52
10
39
11
52
52
41
11
6.0
52
fixed
1
12
1
7
4
1
18
4
14
1
1.0
≤37
Элементы таблицы
sticky
56
16
59
нет
43
8
56
59
43
8
6.0
56
sticky
56
16
32
26-48
нет
43
13
6.1 -webkit-
56
32
26-48
43
13
6.1 -webkit-
6.0
56
Поддерживается: Да Нет Пользователь должен включить