Определение "содержащего блока"

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

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

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

Для других элементов, если только элемент не позиционирован абсолютно, содержащий блок формируется краем содержимого бокса ближайшего предка уровня блока.

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

Если элемент имеет 'position: absolute', то содержащий блок устанавливается ближайшим предком с 'position', отличным от 'static', следующим образом:

Если предок - уровня блока, содержащий блок формируется краем заполнения

предка.
Если предок - инлайн-уровня, содержащий блок зависит от свойства 'direction' предка:

Если 'direction'

- 'ltr', верхний и левый края содержащего блока являются верхним и левым краями первого бокса, генерируемого предком, а нижний и правый края являются нижним и правым краями содержимого последнего бокса предка.

Если 'direction'

- 'rtl', верхний и правый края содержащего блока являются верхним и правым краями первого бокса, генерируемого предком, а нижний и левый края являются нижним и левым краями содержимого последнего бокса предка.

Если такого предка нет, край содержимого бокса корневого элемента устанавливает содержащий блок.

Пример(ы):

Содержащие блоки (СБ) без позиционирования в этом документе:

<HTML> <HEAD> <TITLE>Illustration of containing blocks</TITLE> </HEAD> <BODY id="body"> <DIV id="div1"> <P id="p1">This is text in the first paragraph...</P> <P id="p2">This is text <EM id="em1"> in the <STRONG id="strong1">second</STRONG> paragraph.</EM></P> </DIV> </BODY> </HTML>

устанавливаются так:

Для бокса, генерируемого

СБ устанавливается
body	начальным СБ (зависит от ПА)
div1	body
p1	div1
p2	div1
em1	p2
strong1	p2

<
Если позиция "div1":

#div1 { position: absolute; left: 50px; top: 50px }

то его содержащий блок - уже не "body"; им становится начальный содержащий блок (поскольку отсутствуют другие позиционированные боксы предка).

Также, если позиция "em1":

#div1 { position: absolute; left: 50px; top: 50px } #em1 { position: absolute; left: 100px; top: 100px }

таблица содержащих блоков будет:

Для бокса, генерируемого

СБ устанавливается
body	начальным СБ
div1	начальным СБ
p1	div1
p2	div1
em1	div1
strong1	em1

При позиционировании "em1", его содержащим блоком становится ближайший позиционированный бокс предка (т.е. тот, который сгенерирован "div1").

Содержание раздела