position
Поддержка браузерами
| 12.0+ | 7.0+ | 1.0+ | 1.0+ | 4.0+ | 1.0+ |
Описание
CSS свойство position указывает тип позиционирования элемента на веб странице. Позиционирование определяет относительно чего, при смещении, будет позиционироваться элемент: относительно окна браузера, других элементов или текущего местоположения на веб-странице.
Вместе со свойством position используются свойства top, right, bottom и left, которые управляют смещением позиционированного элемента.
Если элементу с абсолютным или фиксированным позиционированием установить свойства top, left, right, bottom со значением 0, то используя свойство margin со значением auto, элемент можно центрировать и по вертикали и по горизонтали.
| Значение по умолчанию: | static |
|---|---|
| Применяется: | ко всем элементам |
| Анимируется: | нет |
| Наследуется: | нет |
| Версия: | CSS2 |
| Синтаксис JavaScript: | object.style.position="absolute" |
Синтаксис
position: static | absolute | fixed | relative | inherit;
Значения свойства
| Значение | Описание |
|---|---|
| static | Элемент находится в нормальном потоке и отображается на веб-странице в том месте, в котором он расположен в коде HTML-документа. Применение свойств top, left, right и bottom к элементу со статическим позиционированием не даст никакого эффекта. |
| absolute | Элемент с абсолютным позиционированием удаляется из нормального потока, другие элементы, расположенные в коде после него, смещаются на веб-странице на его место. Если для элемента не задано смещение, он остаётся на своём месте. Если смещение задано, элемент позиционируется относительно его первого позиционированного (не static) элемента предка. Если у элемента нет предка с позиционированием (relative, absolute или fixed), тогда он будет смещаться относительно окна браузера. При прокрутке содержимого в окне браузера, элемент прокручивается с остальным содержимым веб-страницы. |
| fixed | Элемент с фиксированным позиционированием удаляется из нормального потока, другие элементы, расположенные в коде после него, смещаются на веб-странице на его место. Если для элемента не задано смещение, он остаётся на своём месте. Если смещение задано, элемент позиционируется относительно окна браузера. При прокрутке содержимого в окне браузера, элемент остаётся на месте, т. е. не прокручивается с остальным содержимым веб-страницы. |
| relative | Элемент с относительным позиционированием остаётся в нормальном потоке. Если для элемента не задано смещение, он остаётся на своём месте. Если смещение задано, элемент позиционируется относительно его текущей позиции, однако, так как элемент находится в нормальном потоке, на его месте на веб-странице остаётся пустое пространство. |
| inherit: | Указывает, что значение наследуется от родительского элемента. |
Пример
CSS Свойство:
position:
Результат:
myDIV
CSS Код:
div#myDIV {
width: 100px;
height: 100px;
background: red;
left: 10px;
top: 100px;
position: static;
}
width: 100px;
height: 100px;
background: red;
left: 10px;
top: 100px;
position: static;
}