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

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

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

.example {
	position: static;
}

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

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

.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, однако они никак не воздействуют на соседние элементы, т.е. второй блок позиционируется независимо от остальных. Демонстрация примера ^[2]:

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

.example {
	position: absolute;
}

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

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

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

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

.example {
	position: fixed;
}

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

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

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

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

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

PS Мои переводы о свойствах float ^[8] и border ^[9].

Автор: grokru

Источник ^[10]