Владимир Дронов - HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
— Теперь предположим, что посетитель выполнил поиск, который оказался удачным, и в низу контейнера с основным содержимым появится список с результатами. После этого посетитель снова выполнил успешный поиск, и в низу контейнера с основным содержимым появится еще один список — с результатами нового поиска. Если повторять поиск снова и снова, будут появляться все новые списки с результатами, и так без конца.
В принципе, некоторые из перечисленных проблем можно решить известными нам средствами. Как уже говорилось, для Web-формы мы можем создать представление, "облагораживающее" ее. Мы способны выявлять, присутствует ли уже в основном содержимом список с результатами поиска, и удалять его; для этого мы можем привязать к списку стилевой класс или дать ему имя, по которому сможем его найти.
Но куда выводить результаты поиска, чтобы посетитель сразу их увидел? Напрашивается вывод: создать на Web-странице еще один блочный контейнер, поместить в него Web-форму и туда же выводить результаты поиска. Но дополнительный контейнер займет определенное место на Web-странице, может быть, слишком много места. А значит, останется меньше пространства для остальных контейнеров.
Мы можем сделать этот контейнер изначально небольшим, ровно таким, чтобы вместить только Web-форму. Если же поиск увенчается успехом, мы увеличим размер контейнера, чтобы он вместил список с результатами. Но тогда остальные контейнеры будут "ездить" по Web-странице туда-сюда, чем немало развеселят посетителей. Хорошее настроение — оно, конечно, замечательно, но все равно это не выход.
Свободно позиционируемые контейнеры
Давайте вернемся назад, к языкам HTML и CSS, и посмотрим, не предложат ли они нам что-либо, радикально решающее эту проблему. Так и есть!
Понятие свободно позиционируемого элемента 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 позволяет сделать свободно позиционируемыми только блочные контейнеры. В этом случае говорят о свободно позиционируемых, или свободных, контейнерах.
Создание свободно позиционируемых элементов
Свободные элементы 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 иллюстрирует пример.
