Подробно о свойстве position

CSS-свойство position — одно из активно используемых разработчиками в любом более-менее сложном макете. В этой статье разобраны основные особенности этого свойства.

Статичные элементы

.example { 	position: static; } 

В большинстве случаев использование значения static излишне, т.к. является дефолтным. Согласно официальной спецификации, поведение статичного блока вполне ожидаемо и зависит от влияния соседних элементов.

Относительно позиционируемые элементы

.example { 	position: relative; } 

Отличие от static проще всего показать на примере:

.box1 {     width: 100px;     height: 100px;     background: blue; }  .box2 {     width: 100px;     height: 100px;     background: green;     border: yellow solid;     position: relative;     top: 20px;     left: 20px; }  .box3 {     width: 100px;     height: 100px;     background: red; }  .box4 {     width: 100px;     height: 100px;     background: pink; } 

Есть четыре блока, которые располагаются друг за другом. Второй имеет отступы top и left, однако они никак не воздействуют на соседние элементы, т.е. второй блок позиционируется независимо от остальных. Демонстрация примера:

Абсолютно позиционируемые элементы

.example { 	position: absolute; } 

Особенность абсолютно позиционированных элементов в том, что они как бы «исключаются» из разметки и располагаются не от соседних блоков, а только от границ окна браузера.

Но если добавить position: relative; родительскому элементу, то блок с position: absolute; будет позиционироваться только в рамках своего контейнера. Демонстрация примера:

Здесь элемент body с черной рамкой, а .container — с оранжевой. Если убрать position: relative; получается вот, что:

Фиксированные элементы

.example { 	position: fixed; } 

Фиксированное положение элемента, в соответствии со спецификацией, подпадает под категорию «абсолютно позиционированного» элемента. Поведение очень похожее, Во-первых, фиксированные элемент всегда связан с границей окна браузера, и добавление position: relative; родителю этого не изменит. Во-вторых, фиксированный элемент не меняет своего положения при скроллинге страницы.

Пример можно наблюдать в блоге Treehouse:

Новые значения в CSS3

В документации CSS3 кроме описанных четырех значений свойства position, есть еще два: position: center и position: page. К сожалению, современные браузеры пока плохо их поддерживают, поэтому применять на действующих проектах эти значения опасно.

С приходом таких штук, как flexbox и сеточная разметка, разработчики будут все меньше использовать позиционирование, но пока оно популярно и достаточно востребовано.