Свободно позиционируемые элементы 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 иллюстрирует пример.

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

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

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

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

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

Здесь:

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

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

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

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

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

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

Средства библиотеки 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();