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

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

Свободные элементы 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) }