CSS-свойство position указывает, как позиционируется элемент относительно других элементов в документе.
| Значение по умолчанию: | static |
| Применяется к: | Все элементы |
| Наследование: | Нет |
| Анимирование: | Нет. Анимируемые свойства |
| Версия: | CSS 2, 3 |
Элементы с position, отличным от static, называются позиционированными (positioned). Их наложение друг на друга определяется свойством z-index.
Синтаксис
Синтаксически свойства задаются по следующему шаблону:
position: static | relative | absolute | fixed | sticky | initial | inheritПримеры написания кода свойства position:
h1 {
position: absolute;
top: 100px;
left: 150px;
}Значения свойств
В следующей таблице описаны значения этого свойства.
| Значение | Описание |
|---|---|
static |
Элементу задется свойство нормального потока, элементы располагаются в том порядке, в котором объявлены в DOM. Это значение установлено по умолчанию. |
relative |
Элемент позиционируется относительно его нормального положения (это называется положением в нормальном потоке). |
absolute |
Элемент позиционируется относительно своего первого родителя, значение позиции которого отличается от static. |
fixed |
Элемент фиксируется относительно области просмотра экрана и не перемещается при прокрутке. При печати элемент печатается на каждой странице. |
sticky |
Элемент расположен аналогично относительно (relative) позиционированного блока, и он «прилипает» (sticks) к ближайшему предку, у которого есть «механизм прокрутки» (scrolling). |
initial |
Устанавливает это свойство в значение по умолчанию. |
inherit |
Если указан, связанный элемент принимает вычисленное значение своего родительского элемента position. |
Поддержка браузеров
Свойство position поддерживается во всех основных браузерах.
