Определение "контейнера"
Положение и размер блоков, порожденных отдельным элементом, в определенных случаях вычисляются относительно некоторой прямоугольной области, называемой контейнером данного элемента и определяемой следующим образом:
- Контейнер (он называется начальным контейнером), в котором отображается корневой элемент, выбирается агентом пользователя.
- Для любого другого элемента, если он не является абсолютно позиционируемым, контейнер определяется краевой линией информативной области ближайшего блока, выступающего в качестве предка данного элемента.
- Если элемент имеет свойство ‘position: fixed’, то контейнер задается областью просмотра.
- Если элемент имеет свойство ‘position: absolute’, то контейнер назначается ближайшим предком, для свойства ‘position’ которого установлено значение, отличное от ‘static’. Это осуществляется следующим образом:
- Если предок принадлежит уровню блока, то контейнер определяется его краевой линией отступов.
- Если предок принадлежит строковому уровню, то контейнер определяется значением его свойства ‘direction’:
- Если свойство ‘direction’ принимает значение ‘ltr’, то верхний и левый сегменты границы контейнера определяются верхним и левым сегментами краевой линии информативной области первого блока, порожденного предком, а нижний и правый сегменты его границы определяются нижним и правым сегментами краевой линии информативной области последнего блока, порожденного предком.
- Если свойство ‘direction’ принимает значение ‘rtl’, то верхний и правый сегменты границы контейнера определяются верхним и правым сегментами краевой линии информативной области первого блока, порожденного предком, а нижний и левый сегменты его границы определяются нижним и левым сегментами краевой линии информативной области последнего блока, порожденного предком.
Если такого предка не существует, то контейнер определяется краями информативной области блока, порожденного корневым элементом.
В документе
<HTML>
<HEAD>
<TITLE>Пример контейнеров</TITLE>
</HEAD>
<BODY id="body">
<DIV id="div1">
<P id="p1">Это текст первого абзаца...</P>
<P id="p2">Это текст <EM id="em1">
<STRONG id="strong1">второго</STRONG> абзаца.</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").