Двадцатый урок. Позиционирование блоков

Позиционирование — это расположение блока на странице. По умолчанию для всех элементов используется режим static:

position: static;

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

Чтобы точно спозиционировать элемент в произвольную позицию используют три разных значения:

position: fixed;
position: relative;
position: absolute;

Значение fixed применяют там, где нужно фиксировать блок на странице и который не будет менять положения при прокрутке страницы.

Сами коордионаты блока указываются свойствами top, right, bottom и left, которые соответствуют отступам сверху, справа, снизу и слева.

top: 10px;
right: 20px;
bottom: 30px;
left: 40px;

Нюанс здесь в том, что у блока есть определенные размеры, поэтому нужно лишь задать точку отсчета двумя значениями: по вертикали — top или bottom, и по горизонтали — right или left. Например:

<div style="position: fixed; top: 10px;	left: 20px; width: 100px; background: red; padding: 20px;"></div>

Fixed часто используется для фиксирования верхнего меню, которое не исчезает при скроллинге. Но такое позиционирование вычленяет блок из общего потока вывода — он как бы плавает над остальными блоками, поэтому нижние блоки окажутся перекрыты fixed-блоком. И тут не поможет margin или float, которые здесь просто не работают.

<div style="position: fixed; top: 0; left: 0; width: 100%; background: blue; color: white; height: 50px;">Меню</div>

Чтобы решить такую проблему следует добавить верхний отступ margin для следующего блока, который визуально следует за фиксированным, либо просто добавить пустой DIV с высотой, примерно совпадающей с высотой меню.

<div style="position: fixed; top: 0; left: 0; width: 100%; background: blue; color: white; height: 50px;">Меню</div>

<div style="height: 50px;"></div>

Такое фиксирование достаточно специфичная вещь, поэтому чаще всего её применяют совместно с js-скриптом, который динамически отслеживает изменение высоты блока и добавляет нужные отступы.

При значении relative точка отсчета берется от своего родителя.

<div style="background: blue; color: white;">
	<div style="position: relative; top: 10px; left: 20px; width: 300px; background: red; height: 30px;"></div>
	
	Lorem ipsum dolor sit amet...
	
</div>
Morbi blandit mollis magna. In vehicula. Vivamus vitae risus vitae lorem iaculis placerat. Sed eu turpis. Sed convallis turpis a ante. Aliquam congue pede a ipsum. Ut magna. Curabitur id est. Donec viverra nibh et dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Обычно relative-позиционирование редко где используют по своему назначению. Например там, где вместо отступов указываются размеры блока. Гораздо большее применение оно имеет в связке с абсолютным позиционированием.

Значание absolute позволяет разместить блок с учетом позиционирования родителя. Если у родителя позиционирование static (значение по умолчанию, которое можно не указывать), то блок будет позиционироваться от окна браузера.

<div style="background: blue; padding: 20px;">
	<div style="position: absolute; top: 100px; left: 200px; width: 300px; height: 200px; background: red;"></div>
</div>

В отличие от fixed, блок сроллируется вместе со страницей.

Если же у родителя указать любое другое значение, обычно это relative, то позиционирование происходит уже относительно родителя.

<div style="background: blue; height: 100px; position: relative; color: white;">
	<div style="position: absolute; top: 10px; left: 20px; width: 300px; height: 30px; background: red;"></div>
	
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
</div>
Aenean quam mauris, vehicula non, suscipit at, venenatis sed arcu. Donec vitae felis nec ligula blandit rhoncus. Donec viverra nibh et dolor. Cras malesuada. Nulla velit. Sed convallis turpis a ante. Nunc id lorem. Nunc eu ipsum tincidunt risus pellentesque fringilla. Etiam ornare fermentum felis. Maecenas nibh eros, dapibus.

Здесь блок полностью изымается из потока вывода и не влияет на соседние блоки. Absolute-позиционирование обычно используется совместно с relative-родителем для точного позиционирования иконок, картинок и прочих фиксированых по размеру блоков.

Для закрепления материала, рассмотрим верстку простого вертикального блока, у которого возле иконки будет выводиться надпись «New». При верстке мы будем использовать UniCSS-классы.

New
Starter Plan
19$/mon
10 000 messages
unlimited data
unlimited users
first 10 day free
<div class="b-center w250px">
	<div class="bg-gray100 pad20 rounded bordered t-center">
		<div class="i-ship t350 t-blue700 pos-relative">
			<div class="pos-absolute t80 t-yellow bg-red bold pad10-rl rounded" style="top: 0; left: 58%;"><i class="i-yelp"></i>New</div>
		</div>
		<div class="mar15-t t150 t-blue600 bold">Starter Plan</div>
		<div class="mar7-t t-gray">19$/mon</div>
		<div class="mar7-t t-gray">10 000 messages</div>
		<div class="mar7-t t-gray"><b>unlimited</b> data</div>
		<div class="mar7-t t-gray"><b>unlimited</b> users</div>
		<div class="mar7-t t-gray">first 10 day free</div>
		<div class="mar20-t"><button class="button bg-blue700">Change Plan</button></div>
	</div>
</div>

Основной блок-контейнер c b-center w250px, который его центрирует и задает ширину 250px. Использование такого блока позволяет его перенести в любое место, например во flex-сетку.

У второго контейнера мы указываем rounded bordered для задания границы и скругления углов. Это классы прототипирования — они используются когда нет точных указаний какие именно нужны размеры скругления и цвет бордюра.

Все следующие блоки — тексты и иконка. Вы уже должны в них ориентироваться.

У блока иконки задается pos-relative, поскольку блок «New» будет позиционирован абсолютно с помощью pos-absolute. У «New» задается оформление, согласно дизайна, а в style мы подбираем параметры отступов (так проще). В данном случае мы немного смещаем его от центра. Если поменять иконку, то возможно придется опять подобрать эти значения.

Задания

Задания доступны только после авторизации.