Позиционирование, Декоративные элементы

Позиционирование

Гибкий механизм расположения элементов.
Не используется для создания сеток.
Используется для создания декоративных

Свойства позиционирования

Режимы позиционирования

Относительное позиционирование

Смещение элемента относительно своего положения.
Управление точкой отсчёта абсолютных элементов.
Участвует в

Смещение элемента

div 1
position: static;

div 3
position: static;

div 2
position: relative;

Смещение элемента

div 1
position: static;

div 3
position: static;

div 2
position: relative;

Место в потоке

Смещение элемента

div 1
position: static;

div 3
position: static;

div 2
position: relative; height: 100px;

Место в

/* смещение

вправо-влево */

right left

/* смещение

вверх-вниз */

top bottom

Смещение элемента

Не используйте противоположные свойства

Смещение элемента

div 1
position: static;

div 3
position: static;

div 2
position: relative; top: 50px;
left: 100px;

Место

Абсолютное позиционирование

Элемент выпадает из потока.
Сжимается под содержимое.
Гибкая модель позиционирования.
Свойства задания координат

Выпадение из потока

div 1
position: static;

div 3
position: static;

div 2
position: static;

div 1
position: static;
position

div

Координаты абсолютного элемента

(0, 0)

Y

X

Привязка к верхнему левому углу

position: absolute; top: 50px;
left: 50px;
50px
50px

Привязка к правому нижнему углу

position: absolute; bottom: 50px; right: 50px;
50px
50px

Изменение точки привязки

position: absolute; bottom: 50px; right: 50px;
50px
50px
position: relative;

Изменение точки привязки

position: absolute; bottom: 50px; right: 50px;
50px
50px
position: relative;

Размеры с помощью координат

position: absolute; left: 50px;
right: 50px;
50px 50px

Изменение точки привязки

Если среди родителей абсолютного элемента есть тег с относительным

Относительные координаты

position: absolute; top: 50%;
left: 50%;
50% высоты браузера
50% ширины браузера

Относительные координаты

relative

top: 50%;
left: 50%;

50% высоты блока

50% ширины блока
position: absolute;

Центровка
position: absolute;

Центровка
position: absolute; top: 50%;
left: 50%; width: 100px; height: 100px;
margin-top: -50px; margin-left:

Относительные размеры

Привязка происходит не только для точки отсчёта координат, но и

Относительные координаты
50% ширины браузера
50% высоты браузера

Относительные координаты
position: absolute; width: 50%;
height: 50%;
50% ширины блока
50% высоты блока
relative

Положение по умолчанию

Положение по умолчанию — это когда у всех координат

Координаты по умолчанию

static

static

static

Координаты по умолчанию

static

static

absolute

Координаты по умолчанию

static
static
absolute right: 50px;

Координаты по умолчанию

static
static
absolute right: 50px;

static

Положение по умолчанию

Если абсолютному элементу не задавать никаких координат, то он

Фиксированное позиционирование

Похоже на абсолютное позиционирование.
Отсчёт координат всегда привязан к окну браузера.
Элемент

Закреплённое позиционирование

Комбинация относительного и фиксированного.
Поддержка пока слабая. http://caniuse.com/#feat=css-sticky
Демонстрация. http://jsfiddle.net/daker/ecpTw/light

position:

sticky;

Управление порядком слоёв

z-index: 10;
У кого больше индекс, тот и выше.
Выше тот,

Управление порядком слоёв