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
поддерживается во всех основных браузерах.