Всё, что мы верстали до сих пор, подчинялось потоку документа: элементы шли сверху вниз и слева направо в естественном порядке. Это надёжная основа, но иногда элемент нужно чуть сдвинуть относительно его места или, что важнее, подготовить как «якорь» для других элементов, которые встанут поверх. Первый шаг к позиционированию — понять сам поток и освоить position: relative, который сдвигает элемент, не выбивая его из общего строя и создавая точку отсчёта для вложенных элементов.

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

Что уже умеем / что добавим

Вы освоили раскладку на Flexbox и Grid — способы организовать элементы в потоке. Теперь научимся управлять положением элемента относительно его обычного места. В сквозном проекте мы подготовим карточку услуги к тому, чтобы разместить на ней значок-бейдж «Хит» — зададим карточке position: relative как точку отсчёта.

Что вы узнаете в рамках статьи

• Что такое поток документа и как в нём располагаются элементы.
• Что делает свойство position и его значение по умолчанию static.
• Как работает position: relative и смещения top, left.
• Почему relative создаёт точку отсчёта для вложенных элементов.

Ключевые термины

• Поток документа (flow) — естественный порядок расположения элементов на странице.
• position — свойство, задающее способ позиционирования элемента.
• static — значение по умолчанию: элемент стоит в потоке.
• relative — смещение относительно собственного обычного места.
• Смещения — top, right, bottom, left, задающие сдвиг.

Что такое поток документа

Поток документа — это порядок, в котором браузер по умолчанию расставляет элементы. Блочные элементы (div, p, section) идут сверху вниз, каждый с новой строки, занимая всю доступную ширину. Строчные (span, a) выстраиваются в строку слева направо и переносятся, когда места не хватает.

Пока вы не вмешиваетесь, всё держится этого порядка: элементы не накладываются друг на друга и не перекрывают соседей — каждый занимает своё место, а следующий встаёт за ним. Именно на этот естественный поток опираются Flexbox и Grid. Позиционирование же — это инструмент аккуратно отступить от потока там, где нужно.

Свойство position и значение static

За способ позиционирования отвечает свойство position. По умолчанию у всех элементов оно равно static — это и есть «элемент стоит в обычном потоке». При static смещения top, left и подобные не действуют: элемент просто занимает своё естественное место.

.box {
  position: static;
}

Такая запись ничего не меняет — это поведение и так стоит по умолчанию. Важно понимать static как отправную точку: пока элемент static, он часть потока и никакие сдвиги к нему не применяются. Чтобы получить возможность смещать элемент, значение position нужно поменять — и первый безопасный вариант — это relative.

Смещение через relative

Значение position: relative оставляет элемент в потоке, но позволяет сдвинуть его относительно собственного обычного места смещениями top, right, bottom, left:

.note {
  position: relative;
  top: 10px;
  left: 20px;
}

Элемент сдвинется на 10 пикселей вниз и на 20 вправо от того места, где он стоял бы обычно. Ключевой момент: место, которое элемент занимал в потоке, остаётся за ним зарезервированным — соседи не сдвигаются, будто он всё ещё там. Сам элемент лишь визуально смещён. Поэтому top: 10px означает «сдвинуть вниз на 10px» (отодвинуть от верха), а left: 20px — «сдвинуть вправо». relative — деликатный инструмент: он не ломает раскладку, а лишь чуть подвигает элемент.

Relative как точка отсчёта

У position: relative есть вторая, куда более важная роль. Элемент с relative становится точкой отсчёта для вложенных в него абсолютно позиционированных элементов. Пока это звучит абстрактно, но именно так делают бейджи, значки и подсказки поверх блоков.

.card {
  position: relative;
}

Сам по себе этот код ничего не смещает — карточка стоит на месте. Но теперь любой вложенный элемент с position: absolute (мы изучим его в следующем уроке) будет отсчитывать своё положение от углов этой карточки, а не от всей страницы. Такой приём — «relative на родителе, absolute на значке» — один из самых частых в вёрстке. Поэтому очень распространено задавать position: relative контейнеру заранее, как фундамент для наложения.

Применяем в проекте

Подготовим карточку услуги к бейджу «Хит», который на следующем уроке ляжет в её угол. Сейчас наша задача — сделать карточку точкой отсчёта, задав ей position: relative.

.card {
  position: relative;
  padding: 1.5rem;
  border-radius: 12px;
  background-color: #fff;
}

Обновите страницу: визуально ничего не изменилось — карточка стоит там же, где и стояла. И это правильно: relative без смещений не двигает элемент. Но мы заложили важную основу — теперь карточка готова принять на себя абсолютно позиционированный бейдж, который встанет точно в её угол. Этот незаметный шаг делает возможным следующий, более эффектный.

Частые ошибки

• Ожидание сдвига соседей.
  При relative место элемента остаётся зарезервированным; соседние элементы не сдвигаются вслед за ним.
• Смещения при static.
  top и left не работают, пока position равно static; сначала смените значение.
• Путаница направления.
  top: 10px толкает элемент вниз (от верхнего края), а не поднимает вверх.
• Забытый relative на родителе.
  Без него вложенный absoluteэлемент будет считать от страницы, а не от нужного блока.

Итоги

Отличное начало раздела о позиционировании! Вы разобрались, что такое поток документа, поняли значение static как «элемент в потоке» и освоили position: relative — и как деликатное смещение, и, главное, как точку отсчёта для будущих наложений. Ваша карточка уже готова принять бейдж, хотя внешне пока не изменилась — это тот случай, когда невидимая подготовка решает всё.

Так держать! В следующем уроке мы выведем элементы из потока по-настоящему: изучим position: absolute и fixed и наконец поставим бейдж «Хит» точно в угол карточки.