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

Ранее мы познакомились с блочными и строчными элементами. Если мы используем только их, то весь сайт можно представить в виде списка элементов, которые «укладываются» в соответствующие размеры экрана по правилам блочных и строчных элементов. Так подход называют «потоком элементов» Тем не менее это не единственный подход к расстановке элементов на сайте.

Возьмем свойство position. По умолчанию оно имеет значение static. Это значит, что если мы выставим такие настройки div { position:static; } то местоположение блока не поменяется position:relative; - также вначале не изменит местоположение объекта, но даст возможность это сделать через свойства top, left,right,bottom. Задавая эти значения можно будет сметить объект относительно его позиции

position:fixed; - полностью игнорирует местоположение объекта в потоке и выставляет объект относительно левого верхнего угла экрана

position:absolute; - полностью похож на fixed в случае, если у блока нет «спозиционированного» родителя (т.е. родителя со свойством position отличного от static). Если же такой родитель есть – позиционирование идет от него.

Пробуем сделать верстку двух блоков так, чтобы в коде они шли в таком порядке

А на экране размещались, так как указано на картинке снизу

При позиционировании два элемента могут начать пересекаться между собой. Чтобы определить какой элемент находится над другим нужно использовать свойство z-index

По умолчанию объекты имеют значение z-index:0 . Но мы можем убрать объект вниз z-index:-1; И поднять его над всеми z-index:10;

Очень важный момент, состоит в том, что z-index работает корректно только для элементов на одном уровне и с одинаковым набором свойств. Например элементы position:static и position:absolute имеют разную иерархию z-index Отдельные иерархии у элементов с float и opacity Практика:

Выравниваем блок по центру по вертикали и по горизонтали .block { position:absolute; margin:auto; top:0; left:0; right:0; bottom:0; }