Позиционирование в CSS: пошаговая инструкция для новичка

К концу этой инструкции у вас будет одна HTML-страница, на которой вы увидите все пять значений свойства position в работе: обычный блок, сдвинутый элемент, кнопка в углу карточки, липкая шапка при прокрутке и модальное окно поверх всего. Ничего, кроме браузера и текстового редактора, не понадобится. На весь разбор уйдёт около получаса.

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

Что нужно перед началом

• Любой браузер актуальной версии — Chrome, Firefox или Safari. Всё описанное работает во всех современных браузерах.
• Текстовый редактор. Подойдёт даже «Блокнот», но удобнее VS Code или что-то с подсветкой синтаксиса.
• Базовое понимание HTML: что такое тег, класс и как открыть файл .html в браузере.

Создайте файл index.html и вставьте в него каркас — дальше будем дописывать в него блоки.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Позиционирование</title>
  <style>
    /* сюда будем добавлять стили */
  </style>
</head>
<body>
  <!-- сюда будем добавлять разметку -->
</body>
</html>

Шаг 1. Значение по умолчанию — static

Любой элемент без указания position имеет значение static. Это значит: он стоит в обычном потоке документа, а свойства top, right, bottom, left на него не действуют вообще. Проверим это.

В <body> добавьте:

<div class="box static">static</div>

А в блок <style>:

.box {
  width: 120px;
  height: 120px;
  background: #4a90d9;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
}
.static {
  position: static;
  top: 50px; /* не сработает — так и должно быть */
}

Проверка: откройте файл в браузере. Синий квадрат стоит у левого верхнего угла, свойство top: 50px его никуда не сдвинуло. Это подтверждает, что при static координаты игнорируются.

Шаг 2. relative — сдвиг относительно самого себя

Значение relative оставляет элемент в потоке (место под него сохраняется), но позволяет сдвинуть его от исходной позиции с помощью top, left и других.

Добавьте в разметку:

<div class="box relative">relative</div>

И в стили:

.relative {
  position: relative;
  top: 20px;
  left: 40px;
  background: #2e7d32;
}

Проверка: зелёный квадрат сместился вниз на 20px и вправо на 40px, но пустое место на его прежней позиции осталось — соседние элементы не сдвинулись, чтобы его занять.

Шаг 3. absolute — привязка к позиционированному предку

Здесь начинается главное. Элемент с position: absolute выпадает из потока (место под него не сохраняется) и позиционируется относительно ближайшего предка, у которого position отличается от static. Если такого предка нет — относительно окна браузера.

Классический приём — кнопка или бейдж в углу карточки. Родителю ставим relative, дочернему элементу — absolute.

<div class="card">
  Карточка товара
  <span class="badge">-30%</span>
</div>

.card {
  position: relative; /* точка отсчёта для потомков */
  width: 200px;
  height: 140px;
  background: #eee;
  margin: 20px;
  padding: 12px;
}
.badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #d32f2f;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
}

Проверка: красный бейдж «-30%» прижат к правому верхнему углу серой карточки. Уберите у .card строку position: relative и обновите страницу — бейдж уедет в угол всей страницы. Это и есть главная ловушка новичков: без позиционированного родителя absolute считает координаты от окна.

Правило, которое стоит запомнить дословно: absolute ищет ближайшего предка с position не static и цепляется за него. Нет такого предка — цепляется за окно браузера.

Шаг 4. fixed — привязка к окну браузера

Элемент с position: fixed тоже выпадает из потока, но всегда позиционируется относительно окна и не двигается при прокрутке. Так делают кнопки «наверх» и плавающие панели.

<button class="to-top">↑</button>
<div style="height: 1500px">Прокрутите страницу</div>

.to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: #333;
  color: #fff;
  cursor: pointer;
}

Проверка: прокрутите страницу вниз. Тёмная круглая кнопка остаётся в правом нижнем углу и не уезжает вместе с содержимым.

Шаг 5. sticky — гибрид relative и fixed

Значение sticky ведёт себя как relative, пока элемент не доскроллит до заданного порога, а затем «прилипает» как fixed. Так делают липкие шапки таблиц и заголовки разделов. Обязательно указывайте порог — например top: 0, иначе прилипания не будет.

<div class="sticky-head">Липкая шапка</div>
<div style="height: 1500px">Длинный контент</div>

.sticky-head {
  position: sticky;
  top: 0;
  background: #ffd54f;
  padding: 12px;
}

Проверка: прокручивайте страницу. Жёлтая шапка едет вместе с контентом, пока её верхний край не упрётся в верх окна, — после этого она замирает на месте.

Как значения соотносятся

Если не получилось

• Элемент с absolute уехал в угол всей страницы. У родителя нет position: relative (или другого не-static). Добавьте его родителю — тому блоку, относительно которого хотите позиционировать.
• top и left не работают. Скорее всего у элемента остался position: static — значение по умолчанию. Задайте нужный position явно.
• sticky не прилипает. Частая причина — не задан порог (top, bottom и т.п.), либо у родителя стоит overflow: hidden или overflow: auto, что ломает прилипание. Проверьте оба условия.
• fixed-кнопка перекрывает контент или прячется под другими блоками. Управляйте наложением через z-index — чем больше значение, тем выше элемент. z-index действует только на позиционированные элементы (не static).
• Абсолютный элемент растянулся на всю ширину. Так бывает, если задать и left, и right без фиксированной ширины. Уберите одно из свойств или задайте width.

Что делать дальше

Когда пять значений уложились в голове, следующий разумный шаг — разобраться с z-index и контекстами наложения: именно там кроется большинство проблем с элементами, которые «прячутся» друг за друга. Отдельная большая тема — как позиционирование сочетается с Flexbox и Grid: во многих случаях выравнивание, ради которого раньше применяли absolute, сегодня делается проще через них. За справкой по конкретным значениям и их поведению удобно держать под рукой раздел про position в документации MDN.