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

Позиционирование — это расположение блока на странице. По умолчанию для всех элементов используется режим 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>
Nulla nunc ipsum, sodales vitae, hendrerit non, imperdiet ac ante. Nam ut sapien quis arcu ullamcorper cursus. Sed libero quam, sodales eget, venenatis non, cursus vel velit. Suspendisse eu tortor. Cras pellentesque erat eu urna. Vestibulum tempor nisi rhoncus eros. Aenean ut lacus. Sed iaculis ultricies tellus. Suspendisse 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>
Morbi blandit mollis magna. In vehicula. Nullam a nisl. Quisque congue ultricies neque. Donec risus risus, pretium ac, tincidunt eu, tempor eu quam. Donec vitae felis nec ligula blandit rhoncus. Aliquam sit amet felis. Sed eu turpis. Nulla velit. Suspendisse eu tortor. Nunc fermentum convallis ligula.Lorem ipsum dolor sit.

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

Задания

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