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

Позиционирование — это расположение блока на странице. В HTML есть понятие потока вывода документа. Он описывает то, в какой последовательности браузер должен выводить и располагать элементы страницы.

За позиционирование в CSS отвечает свойство position. Бывает пять вариантов:

• static — обычное позиционирование по умолчанию.
• relative — вывод как обычно, но можно сместить элемент относительно самого себя или контейнера.
• absolute — элемент исключается из общего потока и располагается относительно родителя или корня документа.
• fixed — элемент исключается из потока и фиксируется на странице.
• sticky — вначале вывод как обычно, но потом фиксируется при прокрутке (скроллинг) страницы.

Обычное позиционирование это static, когда блоки выводятся последовательно друг под другом, как они объявлены в html-коде. Это значение по умолчанию.

В Berry CSS используются готовые классы:

.pos-fixed { position: fixed; }
.pos-absolute { position: absolute; }
.pos-relative { position: relative; }
.pos-sticky { position: sticky; }

Местоположение

Для элементов вне static положение может указываться с помощью свойств top, right, bottom, left. Это расстояние от верха, справа, снизу и слева соответственно. Например так:

.myBlock1 { top: 30px; }
.myBlock2 { top: 10px; right: 30px; }
.myBlock3 { bottom: 30px; right: 20px; }
.myBlock4 { bottom: 10px; left: 20px; }

Нюанс в том, что каждое позиционирование имеет свои особенности, поскольку от этого зависит точка отсчёта.

Relative и Absolute

Часто стоит задача произвольно разместить блок относительно контейнера.

<div class="bg-red100 pad100 pos-relative">
    <div class="pos-absolute bg-blue300 pad10" style="width: 100px; bottom: 10px; right: 20px">Блок</div>
</div>

Блок который нужно спозиционировать указывается как pos-absolute, а также его положение с помощью top/right/bottom/left. Но, есть нюанс — нужно ещё указать pos-relative у его родителя — то есть того блока, относительно которого выполнить позиционирование. Если этого не сделать, то браузер будет искать «родителя» контейнера до тех пор, пока не найдёт подходящего, вплоть до BODY.

При этом, заметь, ширина блока с pos-absolute автоматически будет установлена по его содержимому. Поэтому для такого блока можно указать свойства width/height, либо отступы padding.

Relative

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

<div class="bg-green100 pad20">
    <div class="pad10 bg-yellow300">Какой-то блок</div>
    <div class="bg-red100 pad20 pos-relative" style="top: -20px;">Блок, который нужно сместить</div>
</div>

Контейнер и ещё один блок я разместил только для наглядности — это блоки с обычным позиционированием. А для блока, который нужно сместить указываем pos-relative и значение top с отрицательным смещением (вверх) (для наглядности). Получилось, что блок окажется над тем, который выведен перед ним.

Z-index

Ещё одно свойство, которое влияет на позиционирование, только по оси Z (т.н. наложение слоёв). В этом примере мы видим, что нижний блок наложился на верхний и частично закрыл его. Но, что делать, если нужно наоборот?

Для этого и используется свойство z-index. Его значение — число (можно и отрицательное), которое показывает на сколько нужно сместить блок над остальными.

.z-index9 {z-index: 9}

Но z-index может работать не во всех случаях, поэтому часто его сопровождают pos-relative без изменения через top/left....

<div class="bg-green100 pad20">
    <div class="pad10 bg-yellow300 pos-relative z-index9">Какой-то блок</div>
    <div class="bg-red100 pad20 pos-relative" style="top: -20px;">Блок, который нужно сместить</div>
</div>

Sticky

Это относительно новое свойство, которое позволяет фиксировать элемент при прокрутке. Вначале элемент выводится как обычный static, но когда он оказывается при скроллинге в области видимости, фиксируется и уже никуда не смещается.

Очень часто такое поведение используется на сайтах для фиксации верхней шапки. Посмотри этот пример в Berry Builder.

<div>какое-то содержимое до</div>
<div class="pad20 t-center bg-op20 pos-sticky pos0-t">Sticky</div>
<div>какое-то содержимое после</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Класс bg-op20 создаёт черный фон с прозрачностью 20%.

Раньше для такой фиксации использовался JavaScript, сейчас же, это можно сделать на обычном CSS.

Fixed

Это позиционирование используется для полного вычленения блока из потока документа. Если для остальных свойств браузер резервирует место под блок, а потом его смещает, то с fixed браузер выводит блок вообще вне остальных элементов. Поэтому в таком варианте не будут работать margin/padding-оступы и некоторые другие свойства.

<div class="w100px pos-fixed bg-red t-white pad10" style="bottom: 20px; right: 20px;">Fixed</div>

Как правило такие элементы используются для постоянно видимой навигации. Например здесь по этому принципу сделана кнопка «Наверх ↑».

Классы Berry CSS

Примеры я привожу через style, чтобы ты не боялся использовать нужные свойства при вёрстке. Это из-за того, что часто приходится подбирать точные значения, для которых просто нет подходящих css-классов.

В Berry CSS по умолчанию мы можешь использовать такие варианты.

• .posXX-t — top: XX
• .posXX-r — right: XX
• .posXX-b — bottom: XX
• .posXX-l — left: XX

Где XX может быть: 0, 10, 20, 60, 80 (значения в px).

Для z-indexXX можно использовать значения: 1, 2, 9, 99, 999, 9999.

Обычно этого хватает, но если нет, то просто используй style.

Практика

Для закрепления сверстаем небольшой блок. Задача — разместить иконку справа в блоке заголовка.

У заголовка мы указываем pos-relative, что как-бы задаёт точку отсчёта. А у иконки выполняем абсолютное позиционирование pos-absolute pos20-t pos10-r. Сможешь сам написать код? Представь себе, что это очередное задание от дизайнера.

<div class="bg-gray100 pad20">
    <div class="h1 pos-relative">
        <i class="fas fa-atom t200 bg-blue300 pad5 pos-absolute pos20-t pos10-r"></i>
        Заголовок 
    </div>

    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, quam!</div>
</div>

Задания

1. Сделай новую страницу о космосе на 10-20 абзацев (чтобы они занимали 2 экрана), где вверху расположи Sticky-меню после верхнего заголовка. Внизу размести блок подвала с Fixed, который будет всегда видимым.

2. В примере со Sticky текст после фиксирующегося блока оказывается поверх самого блока (вместо bg-op20 используй сплошной цвет, например bg-red). Как сделать так, чтобы текст оказался внизу?

3. Сверстай последний пример с иконкой только без позиционирования на flex-сетке.