Позиционирование элемента: position

position

Поддержка браузерами
Настольные браузеры Chrome Firefox Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 1.0 1.0 7.0 4.0 1.0
Мобильные браузеры Android Firefox Mobile IE Phone Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 2.2 1.0 7.5 12 6.1.3
Свойство
position — это свойство позволяет определить позиционирование элемента
Описание
Позиционирование — это определение места относительно которого будет задаваться смещение элемента
Наследование
Не наследуется. Это значит что стили применённые к родительскому элементу не передадутся потомкам
Применяется
Ко всем элементам, это значит что применяется и к блочным, и к встроенным, и к табличным и т.д.
Может принимать значения
static | relative | absolute | fixed | inherit
Значение по умолчанию
static
Правила записи
свойство: значение;
Примеры

В этом абзаце слово будет стоять на своем месте

Значение static — это значение по умолчанию, элемент останется в том месте в котором он появляется в общем потоке

В этом абзаце слово будет сдвинуто влево на 44px от правого края и на 27px вверх от нижнего края относительно места которое оно занимает

Нужно обратить внимание что при значении relative свойства position место которое занимал элемент сохраняется

При значении absolute свойства position место которое занимал элемент не сохраняется, позиционироваться он будет исходя из позиционирования родительского элемента, если родительский элемент позиционирован как relative, absolute или fixed, то смещение будет относительно этого элемента, если же нет позиционированного предка, то смещение будет происходить относительно окна браузера

При значении fixed свойства position место которое занимал элемент не сохраняется, он позиционируется относительно окна браузера и остается в этой позиции при прокрутке страницы

Это значит что свойство унаследует значение от родителя

Поделиться