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

Позиционирование — это расположение блока на странице. По умолчанию для всех элементов используется режим 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>
Etiam congue. Sed libero quam, sodales eget, venenatis non, cursus vel velit. Ut a pede ac neque mattis facilisis. Ut magna. Sed iaculis ultricies tellus. Sed consectetuer sodales justo. Morbi blandit mollis magna. In vehicula. Phasellus in neque. Maecenas nibh eros, dapibus at, pellentesque in, auctor a enim. In.

Обычно 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>
Sed eu turpis. Etiam congue. Vestibulum tempor nisi rhoncus eros. Aenean quam mauris, vehicula non, suscipit at, venenatis sed arcu. Nullam a nisl. Curabitur id est.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed convallis turpis a ante. Phasellus in neque. Maecenas nibh eros, dapibus at, pellentesque in, auctor.

Здесь блок полностью изымается из потока вывода и не влияет на соседние блоки. 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 мы подбираем параметры отступов (так проще). В данном случае мы немного смещаем его от центра. Если поменять иконку, то возможно придется опять подобрать эти значения.

Задания

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