23. Понятие свободно позиционируемого элемента 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 позволяет сделать свободно позиционируемыми

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

или свободных, контейнерах.

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

Свободные элементы 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 (см. табл. 8.1). Значение auto возвращает управление соответ-ствующей координатой Web-обозревателю.

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

Листинг 21.1

#search { position: absolute;

left: 200px;

top: 100px;

width: 300px;

height: 200px }

Мы уже знаем, что свободные элементы могут перекрывать друг друга. При этом

элемент, определенный в HTML-коде позже, перекрывает элемент, определенный

раньше. Однако мы можем сами задать порядок их перекрытия друг другом, указав

так называемый z-индекс. Он представляет собой целое число, указывающее номер

в порядке перекрытия; при этом элементы с бóльшим z-индексом перекрывают

элементы с меньшим z-индексом. Z-индекс задается атрибутом стиля с "говоря-щим" именем z-index:

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

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

Листинг 21.2

#search { position: absolute;

left: 200px;

top: 100px;

width: 300px;

height: 200px;

z-index: 2 }

#main { position: absolute;

left: 100px;

top: 0px;

width: 600px;

height: 500px;

z-index: 0 }

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

z-индекс.

Еще один атрибут стиля, который иногда может быть полезен, — clip. Он опреде-ляет координаты прямоугольной области, задающей видимую область свободного

элемента. Фрагмент содержимого элемента, попадающий в эту область (ее, кстати,

называют маской), будет видим на Web-странице, остальная часть содержимого

будет скрыта.

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

clip: rect(<верхняя граница>, <правая граница>, <нижняя граница>,

<левая граница>)|auto|inherit

Здесь:

 верхняя граница — расстояние от верхней границы свободного элемента до

верхней границы маски по вертикали;

 правая граница — расстояние от левой границы свободного элемента до правой

границы маски по горизонтали;

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

 левая граница — расстояние от левой границы свободного элемента до левой

границы маски по горизонтали.

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

иллюстрирует пример.

Листинг 21.3

#search { position: absolute;

left: 200px;

top: 100px;

width: 300px;

height: 200px;

z-index: 2;

clip: rect(100px, 200px, 200px, 0px) }