Веб-браузеры предназначены для отображения html-элементов на веб-странице по определенным стандартам. Блочные элементы, такие как , , обычно занимают всю доступную для них ширину и укладываются вертикально один под другим. Строчные элементы, такие как , или выстраиваются по горизонтали до тех пор, пока не будет занята вся доступная ширина, после того как вся ширина будет занята, будет сделан перенос строки и все пойдет по новой - это называется стандартным или нормальным потоком элементов.
Свойство position указывает метод позиционирования элемента на веб странице. Позиционирование определяет расположение элемента относительно окна браузера, других элементов или текущего местоположения на веб-странице.
Вместе со свойством position используются свойства , , и , которые определяют направление смещения позиционированного элемента.
Значение по умолчанию: |
static |
Наследуется: |
нет |
Версия: |
CSS2 |
Синтаксис JavaScript: |
object.style.position="absolute" |
Значение |
Описание |
static: |
Элемент отображается в том месте, в котором он располагается в потоке документа. Применение свойств top, left, right и bottom к элементу со статическим позиционированием не даст никакого эффекта. |
absolute: |
Элемент с абсолютным позиционированием удаляется из потока документа и другие элементы смещаются на его место. Если для элемента не задано смещение, он остаётся на своём месте. Если смещение задано, элемент позиционируется относительно его первого позиционированного (не static) элемента предка. Если у элемента нет предка с позиционированием (relative, absolute или fixed), тогда он будет смещаться относительно окна браузера. |
fixed: |
Элемент с фиксированным позиционированием удаляется из потока документа и другие элементы смещаются на его место. Если для элемента не задано смещение, он остаётся на своём месте. Если смещение задано, элемент позиционируется относительно окна браузера. При прокрутке содержимого в окне браузера, элемент остаётся на месте, т.е. не прокручивается с остальным содержимым. |
relative: |
Элемент с относительным позиционированием остаётся в потоке документа. Если для элемента не задано смещение, он остаётся на своём месте. Если смещение задано, элемент позиционируется относительно его текущей позиции, однако, так как элемент находится в потоке документа на его месте остаётся пустое пространство. |
inherit: |
Указывает, что значение наследуется от родительского элемента. |
Пример
|