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

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

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

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

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

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

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

Добавлено: 19 Июля 2018 07:04:18 Добавил: Андрей Ковальчук Нравится 0

Добавить