ИНФОРМАЦИЯ,    ДИЗАЙН,    ПЕРЕВОДЫ,    РЕКЛАМА   .   .   .
w a p - с а й т
Информационный портал
Сегодня:  
admin@aranea.ru
+79068922256

   aranea.ru || Спецификация CSS2 | 10.1. Определение "объемлющий блок".

10.1. Определение "объемлющий блок".

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

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

← Назад | Вперед →
Copyright © 2006 -  aranea.ru