Свободно позиционируемые элементы Web-страницы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Самый важный атрибут стиля – position. Он задает способ позиционирования элемента Web-страницы:

position: static | absolute | relative | fixed | inherit

Этот атрибут стиля может принимать четыре значения:

• static – контейнер непозиционируемый (поведение по умолчанию);

• absolute – элемент Web-страницы свободно позиционируемый. Его координаты задаются относительно верхнего левого угла родителя. Место на Web-странице под такой элемент не выделяется. Если содержимое родителя прокручивается, свободно позиционируемый элемент будет перемещаться вместе с ним;

• relative – элемент Web-страницы относительно позиционируемый. Его координаты отсчитываются относительно точки, в которой он находился бы, если был непозиционируемым. На Web-странице выделяется место под такой элемент;

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

Пример:

#search { position: absolute }

Здесь мы превратили контейнер search в свободно позиционируемый.

Атрибуты стиля left и top задают, соответственно, горизонтальную и вертикальную координаты верхнего левого угла свободно, относительно или фиксированно позиционируемого элемента Web-страницы:

left | top: <значение>| auto | inherit

Значения координат можно указывать в любых единицах измерения, поддерживаемых стандартом CSS. Значение auto возвращает управление соответствующей координатой Web-обозревателю.

В примере из листинга 21.1 мы задали координаты и размеры контейнера search.

Мы уже знаем, что свободные элементы могут перекрывать друг друга. При этом элемент, определенный в HTML-коде позже, перекрывает элемент, определенный раньше. Однако мы можем сами задать порядок их перекрытия друг другом, указав так называемый z-индекс. Он представляет собой целое число, указывающее номер в порядке перекрытия; при этом элементы с бóльшим z-индексом перекрывают элементы с меньшим z-индексом. Z-индекс задается атрибутом стиля с "говорящим" именем z-index:

z-index: <номер>| auto | inherit

Как уже говорилось, z-индекс указывается в виде целого числа. Значение auto возвращает управление порядком перекрытия Web-обозревателю. Листинг 21.2 иллюстрирует пример.

Контейнер search перекроет контейнер main, поскольку для него задан больший z-индекс.

Еще один атрибут стиля, который иногда может быть полезен, – clip. Он определяет координаты прямоугольной области, задающей видимую область свободного элемента. Фрагмент содержимого элемента, попадающий в эту область (ее, кстати, называют маской), будет видим на Web-странице, остальная часть содержимого будет скрыта.

Вот синтаксис записи атрибута clip:

clip: rect (<верхняя граница>, <правая граница>, <нижняя граница>, <левая граница>)| auto | inherit

Здесь:

• верхняя граница – расстояние от верхней границы свободного элемента до верхней границы маски по вертикали;

• правая граница – расстояние от левой границы свободного элемента до правой границы маски по горизонтали;

• нижняя граница – расстояние от верхней границы свободного элемента до нижней границы маски по вертикали;

• левая граница – расстояние от левой границы свободного элемента до левой границы маски по горизонтали.

Значение auto атрибута стиля clip убирает маску и тем самым делает все содержимое свободного элемента видимым. Это поведение по умолчанию. Листинг 21.3 иллюстрирует пример.

Средства библиотеки Ext Core для управления свободно позиционируемыми элементами

Рассмотрим методы объекта Element библиотеки Ext Core, с помощью которых мы можем управлять свободно позиционируемыми элементами Web-страницы. Их немного.

Метод position задает способ позиционирования, z-индекс и координаты данного элемента:

<экземпляр объекта Element>.position(<способ позиционирования>

[, <z-индекс>[, <горизонтальная координата>

[, <вертикальная координата>]]])

Первым – обязательным – параметром передается соответствующее значение атрибута стиля position в виде строки: "absolute", "relative" или "fixed". Остальные – необязательные – параметры определяют, соответственно, z-индекс, горизонтальную и вертикальную координаты в пикселах; все эти значения задаются в виде чисел.

Пример:

var elSearch = Ext.get("search");

elSearch.position("absolute", 2);

Методы setX и setY задают, соответственно, горизонтальную и вертикальную координаты данного элемента относительно верхнего левого угла Web-страницы:

<экземпляр объекта Element>.setX|setY(<значение координаты>)

Значение координат указывают в пикселах в виде числа:

elSearch.setX(400);

elSearch.setY(200);

Метод setLocation задает сразу обе координаты данного элемента также относительно верхнего левого угла Web-страницы:

<экземпляр объекта Element>.setLocation(<горизонтальная координата>,

<вертикальная координата>)

Оба значения координат задают в виде чисел в пикселах:

elSearch.setLocation(400, 200);

Метод clearPositioning делает данный элемент непозиционируемым и удаляет заданные для него координаты. Этот метод не принимает параметров и не возвращает результата:

elSearch.clearPositioning();