Containing block

Containing block — прямоугольник, относительно которого считаются percentages и offset для positioned элементов. Для absolute обычно это ближайший positioned предок; для static flow — block container.

Transform, filter, perspective и contain могут сделать предка containing block для fixed и absolute потомков — частый источник багов «fixed header не fixed».

					.panel {
  position: relative;
  height: 400px;
}
.panel__badge {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: 25%; /* 25% от padding edge .panel */
}
				

Процентная height работает только при определённой высоте containing block; иначе height: 100% ведёт себя как auto.

На интервью: какой предок задаёт offset для absolute потомков и почему fixed иногда скроллится с transformed родителем.

Типовые ошибки: transformed предок «захватывает» fixed; процентная height без определённой высоты предка.

Чеклист:

• Определите formatting context и positioned предков.
• Следите за transform и containment на предках.
• Проверяйте definite sizes для percentages.
• Logical inset при смене направления текста.