Определение "содержащего блока"
Позиция и размер бокса(ов) элемента иногда вычисляются относительно определённого прямоугольника, называемого содержащий блок элемента.
Содержащий блок элемента определяется так:
- Содержащий блок (называемый начальным содержащим блоком), в котором находится корневой элемент, выбирается пользовательским агентом (ПА).
- Для других элементов, если только элемент не позиционирован абсолютно, содержащий блок формируется краем содержимого бокса ближайшего предка уровня блока.
- Если элемент имеет '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 |