Блок-контейнер

Ранее в этой главе мы обсуждали блоки-контейнеры в связи с перемещаемыми элементами. В том случае блок-контейнер перемещаемого элемента был определен как ближайший блочный элемент-предок. Что касается позиционирования, то все не так просто. CSS2.1 определяет следующие линии поведения:

• Блок-контейнер «корневого элемента» (также называемый начальным блоком контейнером) определяется агентом пользователя. В HTML корневым элементом является элемент html, хотя некоторые броузеры используют элемент body. В большинстве броузеров начальный блок-контейнер – это прямоугольник, размер которого соответствует размеру окна просмотра.

• Для некорневого элемента, значение свойства position которого – relative или static, блок-контейнер формируется краем содержимого ближайшего блочного элемента-предка, ячейки таблицы или строкового блока.

• Для некорневых элементов, значение свойства position которых – absolute, блоком контейнером считается ближайший предок (любой), значение position которого отлично от static. Это происходит следующим образом:

• Если предок является блочным элементом, блок-контейнер формируется его внешней границей отступа; иначе говоря, областью, которая была бы ограничена рамкой.

• Если предок – строковый элемент, блок-контейнер формируется внешней границей содержимого предка.


В языках с написанием слева направо верхняя и левая стороны блока контейнера – это верхний и левый края содержимого первого блока, порожденного предком, а нижний и правый края – это нижний и правый края содержимого последнего блока. В языках с написанием справа налево правый край блока-контейнера соответствует правому краю содержимого первого блока, а левый край соответствует левому краю последнего блока. Верх и низ аналогично.

• Если предков нет, блок-контейнер элемента является начальным блоком-контейнером. Важно отметить: элементы могут позиционироваться вне их блока-контейнера. Очень похоже перемещаемые элементы могут применять отрицательные поля, чтобы выйти за пределы области содержимого их родителя. Также предлагается заменить термин «блок -контейнер» на «контекст позиционирования», но поскольку в спецификации говорится «блок-контейнер», так буду поступать и я. (Я действительно пытаюсь свести путаницу к минимуму. Честное слово!)

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Блоки-контейнеры и абсолютно позиционированные элементы
Видимость элементов
Задание ширины и высоты
Запрет на обтекание
Запрет перемещения