Листинг 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 иллюстрирует пример.