Понятие свободно позиционируемого элемента Web‑страницы

Откроем любую из созданных нами ранее Web‑страниц и посмотрим на нее. Что мы видим?

Прежде всего, расположением элементов этих Web‑страниц управляет сам Web‑обозреватель. При этом он руководствуется следующими правилами.

– Элемент выводится на экран в том месте, в котором находится определяющий его HTML‑код. Так, контейнер cheader мы определили в самом начале HTML‑ кода Web‑страницы index.htm, поэтому он будет выведен в самом ее начале, т. е. в верхней части.

– Если для элементов задано значение none атрибута стиля float (см. главу 10 ) или этот атрибут стиля вообще отсутствует, то элементы выстроятся друг за другом по вертикали. Пример: контейнеры cheader и cnavbar, для которых мы не указали этот атрибут стиля.

– При других значениях атрибута стиля float элементы выстроятся по горизонтали. Пример: контейнеры cnavbar и cmain, для которых мы задали значение left атрибута стиля float.

Произвольно управлять местоположением элементов Web‑страницы в этом случае мы не можем. Поэтому такие элементы называются непозиционируемыми .

Web‑дизайнерам и особенно Web‑программистам такое положение дел не нравилось. Именно поэтому уже довольно давно в языке CSS появилась возможность создавать свободно позиционируемые , или свободные , элементы Web‑страницы.

Подобный элемент может располагаться где угодно на Web‑странице, независимо от места в HTML‑коде, где стоит определяющий его тег.

Рассмотрим особенности свободно позиционируемых элементов Web‑страницы.

– Местоположение свободно позиционируемого элемента задается произвольно в виде горизонтальной и вертикальной координат его верхнего левого угла. Координаты задают относительно верхнего левого угла родителя данного элемента.

– Под свободно позиционируемый элемент на Web‑странице место не выделяется.

– Свободно позиционируемые элементы находятся "выше" обычного содержимого Web‑страницы, как бы "плавают" над ним и перекрывают его.

– Свободно позиционируемые элементы могут перекрывать друг друга. Обычное содержимое Web‑страницы свободные элементы перекрывают в любом случае.

– Слово "перекрывают" в предыдущих двух пунктах обозначает, что содержимое Web‑страницы, находящееся под свободным элементом, не будет видно – его скроет свободный элемент.

– Свободно позиционируемые элементы могут иметь любое содержимое, в том числе и другие свободно позиционируемые элементы.

Существующая реализация CSS позволяет сделать свободно позиционируемыми только блочные контейнеры. В этом случае говорят о свободно позиционируемых , или свободных , контейнерах.