#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) }