Поиск

Подробное описание модели визуального форматирования

Определение "контейнера"

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

  1. Контейнер (он называется начальным контейнером), в котором отображается корневой элемент, выбирается агентом пользователя.
  2. Для любого другого элемента, если он не является абсолютно позиционируемым, контейнер определяется краевой линией информативной области ближайшего блока, выступающего в качестве предка данного элемента.
  3. Если элемент имеет свойство 'position: fixed', то контейнер задается областью просмотра.
  4. Если элемент имеет свойство 'position: absolute', то контейнер назначается ближайшим предком, для свойства 'position' которого установлено значение, отличное от 'static'. Это осуществляется следующим образом:
    1. Если предок принадлежит уровню блока, то контейнер определяется его краевой линией отступов.
    2. Если предок принадлежит строковому уровню, то контейнер определяется значением его свойства 'direction':
      1. Если свойство 'direction' принимает значение 'ltr', то верхний и левый сегменты границы контейнера определяются верхним и левым сегментами краевой линии информативной области первого блока, порожденного предком, а нижний и правый сегменты его границы определяются нижним и правым сегментами краевой линии информативной области последнего блока, порожденного предком.
      2. Если свойство '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").