Листинг 16.22

#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-обозревателю. Листинг 16.23 иллюстрирует пример.

Листинг 16.23

#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 убирает маску и тем самым делает все содержимое свободного элемента видимым. Это поведение по умолчанию. Листинг 16.24 иллюстрирует пример.

Листинг 16.24

#search { position: absolute;

left: 200px;

top: 100px;

width: 300px;

height: 200px;

z-index: 2;

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