Содержащий блок

Когда в CSS написано width: 50% или top: 0, возникает вопрос: пятьдесят процентов чего и ноль от какого края? Ответ всегда один — от содержащего блока. Кто им окажется, зависит от значения position самого элемента, и именно здесь кроется большинство загадок вёрстки: «всплывашка улетела в угол страницы», «процент считается не от того блока».

Как определяется

• static и relative — область содержимого ближайшего предка-блока. Чаще всего это родительский элемент.
• absolute — область внутри рамки ближайшего предка, у которого position отличается от static. Если такого нет — начальный содержащий блок размером с окно у корня документа.
• fixed — область просмотра. Исключение: если у предка есть transform, filter, perspective или некоторые значения contain, содержащим блоком становится он.

Пример: метка на карточке

.card {
  position: relative;   /* делает карточку содержащим блоком */
}
.card .badge {
  position: absolute;
  top: 8px;
  right: 8px;           /* угол карточки, а не страницы */
}

Без position: relative у карточки метки всех товаров собрались бы в правом верхнем углу ближайшего позиционированного предка — например, всего каталога.

Неожиданные последствия

• Вертикальные отступы в процентах — padding-top и margin-top — считаются от ширины содержащего блока, а не от высоты. На этом раньше строили блоки с сохранением пропорций для видео. Сейчас для этого есть aspect-ratio.
• Высота в процентах работает, только если высота содержащего блока задана. Иначе height: 100% ведёт себя как auto.
• Модальное окно внутри анимированного блока. Окно с position: fixed, вставленное в контейнер с transform, перестаёт закрывать экран и прокручивается вместе с контейнером. Поэтому модальные окна выносят в конец body.

Подробнее о значениях position — в статье про позиционирование.