Содержащий блок: откуда считаются размеры и смещения

Назначение

Содержащий блок задаёт систему отсчёта для определённых размеров, процентов и позиционирования элемента.

Как это работает

У абсолютного элемента его часто формирует ближайший подходящий позиционированный предок. Некоторые свойства, например transform, тоже могут менять соответствующий контекст. Это не всегда непосредственный родитель в HTML.

Пример

<style>.card{position:relative;min-height:120px;padding:32px 16px;border:1px solid}.tag{position:absolute;top:8px;right:8px;background:#eaf4ee}</style>
<div class="card"><span class="tag">Пример</span>Основной текст карточки.</div>

Что должно получиться

Метка расположена у верхнего правого края карточки, потому что карточка создаёт подходящий содержащий блок. Она не добавляет высоту в обычный поток.

Граница применения и частая ошибка

Не считайте top:0 безусловным верхом окна браузера. При неожиданном положении сначала выясните содержащий блок и тип позиционирования, затем уже меняйте числовые смещения.

Самостоятельная проверка

Добавьте position:relative внутреннему контейнеру и сравните положение абсолютной метки до и после. Проверьте, какое изменение действительно создало нужную систему отсчёта.

HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.

Связанные материалы

• Структура проекта
• Отладка CSS
• Консоль браузера