Позиционирование в CSS определяет, как элемент располагается на странице относительно потока документа, родителя или окна браузера. Обычно блоки идут друг за другом (нормальный поток). Свойство position позволяет вынести элемент из потока, закрепить его у края экрана, «прилипнуть» при скролле или сместить относительно исходного места.
В этом занятии: static, relative, absolute, fixed, sticky, свойства top, right, bottom, left и z-index для управления порядком наложения. В практике — страница с фиксированной шапкой, относительным контейнером, абсолютно позиционированным бейджем и sticky-блоком.
По умолчанию у всех элементов position: static. Элемент участвует в нормальном потоке: блоки идут сверху вниз, строчные элементы — в строку. Свойства смещения top, right, bottom, left и z-index для static не действуют.
Явно писать position: static обычно нужно только когда вы «сбрасываете» ранее заданное позиционирование (например в медиа-запросе для мобильной версии).
При position: relative элемент остаётся в потоке (место под него сохраняется), но вы можете сместить его с помощью top, right, bottom, left. Смещение считается от исходной позиции элемента. Отрицательные значения сдвигают в противоположную сторону.
Часто relative задают родителю не ради смещения, а чтобы сделать его контекстом позиционирования для дочерних элементов с position: absolute — тогда абсолютный элемент выравнивается относительно этого родителя, а не относительно окна или другого предка.
Контейнер с пунктирной границей; внутри — красный квадрат с position: relative. Меняйте значения top и left кнопками ±. Квадрат сдвигается, но место в потоке под ним не «схлопывается».
Текст под блоком — остаётся на месте, потому что relative не вынимает элемент из потока.
Подсказка: то же самое можно делать в консоли разработчика: откройте DevTools (F12), найдите элемент с классом demo-rel-square в панели «Элементы», в блоке «Стили» меняйте значения top и left и смотрите результат.
При position: absolute элемент вынимается из потока: место под него не резервируется, следующие элементы подтягиваются. Позиция задаётся относительно ближайшего предка, у которого position не static (то есть relative, absolute, fixed или sticky). Если такого предка нет — относительно окна (viewport) или корня документа.
Свойства top, right, bottom, left задают отступы от соответствующих краёв этого контейнера. Часто используют пару: например top: 0; right: 0 для бейджа в углу карточки.
Родительский блок имеет position: relative, красный бейдж — position: absolute. Меняйте top и right кнопками ± — бейдж остаётся относительно карточки, а не уезжает к краю страницы.
При position: fixed элемент вынимается из потока и привязывается к окну браузера (viewport). При прокрутке он остаётся на одном и том же месте на экране. Типичное применение: фиксированная шапка, нижняя панель, кнопка «Наверх», модальное окно.
Позиция задаётся через top, right, bottom, left. Часто для шапки пишут position: fixed; top: 0; left: 0; right: 0; и добавляют контенту padding-top, чтобы он не заходил под шапку. Чтобы шапка была поверх контента при скролле, задают z-index.
Навбар вверху этой страницы как раз с position: fixed; top: 0; left: 0; right: 0; z-index: 1000. При прокрутке вниз он остаётся на месте. Прогресс-бар под ним тоже fixed. После нажатия «Дальше» справа вверху появится красный прямоугольник — прокрутите страницу вниз: он не исчезнет, потому что тоже fixed.
position: sticky — гибрид: элемент ведёт себя как обычный в потоке, пока не достигнет заданного порога при скролле, после чего «прилипает» и остаётся на месте. Порог задаётся через top, bottom, left или right. Например position: sticky; top: 0 — заголовок секции при прокрутке доходит до верха окна и дальше остаётся прикреплённым, пока его родитель не уедет с экрана.
Родитель не должен обрезать overflow (или overflow должен позволять видеть sticky). Иначе sticky может не сработать.
Прокрутите блок ниже вниз: каждый цветной заголовок секции при достижении верха области прилипнет и будет оставаться наверху, пока вы скроллите его контент. Когда подойдёт следующая секция, её заголовок «подтолкнёт» предыдущий — так работают липкие заголовки в длинных списках и таблицах.
Текст первой секции. Прокрутите вниз — синий заголовок останется наверху области.
Ещё абзац. Пока вы внутри этой секции, заголовок «Секция 1» прилип к верху.
Третий абзац. Дойдите до зелёного заголовка «Секция 2» — он заменит синий.
Текст второй секции. Зелёный заголовок теперь прилип к верху.
Продолжайте скролл. Когда увидите фиолетовый «Секция 3», он вытеснит зелёный.
Так в длинных списках всегда видно, в какой группе вы находитесь.
Последняя секция. Фиолетовый заголовок прилипнет и останется наверху до конца блока.
Конец демо. Обратите внимание: каждый заголовок имел position: sticky; top: 0.
Пример кода для sticky
.sticky-header {
position: sticky; /* прилипание при скролле */
top: 0; /* порог: прилипать к верху (0 от верха видимой области) */
z-index: 2; /* поверх контента при скролле */
background: #5b8de9;
color: #fff;
padding: 10px 14px;
}
/* Другие значения порога: */
/* top: 60px; — прилипнет, отступив 60px от верха (например под фиксированной шапкой) */
/* bottom: 0; — прилипание к низу области (для футера в скролле) */
/* left: 0; — прилипание к левому краю (для боковой колонки) */
Свойства top, right, bottom, left задают смещение от соответствующего края контейнера позиционирования (для relative — от исходной позиции элемента, для absolute/fixed — от краёв контейнера или viewport). Значения — длина (px, em, rem, %) или auto (по умолчанию).
Можно задать не все четыре, а только нужные: например только top и left. Если задать и left, и right, элемент растянется по горизонтали (если не задана ширина — займёт всё пространство между краями). То же для top и bottom по вертикали.
Когда элементы перекрывают друг друга (например фиксированная шапка и контент, или несколько абсолютно позиционированных блоков), порядок наложения по умолчанию определяется порядком в разметке: позже идущие — выше. Свойство z-index (целое число) позволяет явно задать слой: большее значение — выше. Отрицательный z-index помещает элемент под соседей без позиционирования.
Важно: z-index работает только у элементов с position отличным от static. Элементы с разными родителями сравниваются по контексту наложения: у каждого позиционированного элемента с заданным z-index создаётся свой «стек», и дочерние не могут оказаться между слоями другого контекста.
Три блока наложены друг на друга. Кнопки меняют их z-index. Тот, у кого значение больше, отображается сверху.
Сейчас сверху: слой 3 (z-index: 3).
static — по умолчанию, в потоке. relative — смещение от себя, часто используется как контекст для absolute. absolute — относительно ближайшего позиционированного предка (или viewport), вынимается из потока. fixed — относительно окна, не скроллится. sticky — в потоке до порога, потом прилипает. top, right, bottom, left задают смещение. z-index управляет порядком наложения у элементов с position не static.
Выберите для каждого значения подходящее описание.
z-index влияет на порядок наложения только если у элемента:
position: sticky используется когда нужно:
Для доступа к практике нужно набрать не менее 80% (минимум 7 из 8 правильных ответов).
1. position: absolute позиционирует элемент относительно…
2. Чтобы бейдж в углу карточки не уезжал к краю страницы, карточке задают…
3. position: fixed привязывает элемент к…
4. z-index действует только при position…
5. Элемент с position: relative…
6. position: sticky — это…
7. Для фиксированной шапки обычно задают…
8. Элемент с position: absolute без позиционированного предка привязывается к…
Сделайте одну HTML-страницу со стилями в <style> (или подключите .css). Выполните:
position: fixed, прикреплён к верху окна (top: 0, left: 0, right: 0 или аналог). У основного контента задайте отступ сверху (padding-top или margin-top), чтобы он не заходил под шапку. Задайте шапке z-index (например 100).position: relative.position: absolute (бейдж, иконка, подсказка в углу). Задайте смещение через top/right или bottom/left.position: sticky и указанием top или bottom (например липкий заголовок секции при скролле).Порог зачёта: 70 баллов из 100. Загрузите index.html и нажмите «Проверить».