2 ноября 2021 года .

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

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

Например, в такой ситуации размеры блока будут считаться не относительно родителя и блок .c будет иметь высоту 100px, тогда как его родитель .b имеет нулевую высоту:

<div class='a'>
  <div class='b'>
    <div class='c'></div>
  </div>
</div>
<style>
  .a {position: relative; height: 200px}
  .c {position: absolute; height: 50%;}
</style>

Если прибегать к упрощенным определениям, можно сказать, что содержащий блок - это родитель элемента не по DOM, а по потоку документа.

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

1. Содержащий блок, в котором находится корневой (не имеющий родителей) элемент, представляет собой прямоугольник, который называется начальным содержащим блоком. Для веба и дргуих непрерывных (без страниц) носителей он имеет размеры области просмотра и закреплен в левом верхнем углу окна. Свойство direction начального содержащего блока такое же, как и для корневого элемента.

2. Для других элементов, если свойство position определено как static или relative, содержащий блок формируется краем содержимого блока ближайшего блока-предка.

3. Если элемент имеет position: fixed, содержащий блок определяется областью просмотра.

4. Если элемент имеет position: absolute, содержащий блок устанавливается ближайшим предком, у которого значение свойства position уставновлено как absolute, relative или fixed, следующим образом:

   • В случае, если предок является строчным элементом, содержащий блок является прямоугольником, охватывающим поля заполнения первого и последнего инлайн-блоков, созданных для этого элемента.

   • В остальных случаях содержащий блок формируется краем padding-бокса предка. Если такого предка нет, содержащим блоком назначается начальнй содержащий блок.

Источник: https://drafts.csswg.org/css2/#containing-block-details