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

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

Например, в такой ситуации размеры блока будут считаться не относительно родителя и блок .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

#css_box_model

Написала про поведение незамещаемого блока в нормальных условиях.

Это должно было быть постом здесь, а не на сайте, но текст по длине не влезает в пост(

Это перевод одно из разделов спецификации про расчет ширины и отступов. Планирую перевести их все и потом оформить в полноценную статью с демками.

https://ariarzer.dev/notes/2022/20220107.html

#css_box_model