В CSS 2 существует такое понятие, как слой. Надо сказать, оно привычно всем, кто работал с любым графическим редактором, но, возможно, пока непонятно для остальных.

Создавая блок в CSS, мы всегда четко задаем его параметры, а также позиционируем его в определенное место на экране. Таким образом, любой блок имеет две координатах X и Y, которые определяют положение блока на плоскости экрана. Но в CSS 2 есть еще и третья, пространственная координата Z, которая определяет номер слоя, на котором находится блок.

Слои формируются по аналогии со слоями в графическом редакторе, где у изображения всегда есть основа, фоновый слой (background). Поверх него накладываются какбы прозрачные кальки такого же размера, как и фоновый слой, и на определенные части этих калек нанесен некоторый рисунок. Накладываясь друг на друга, рисунки на разных слоях формируют общее (композитное) изображение. Естественно, что изображение на слое, лежащем поверх остальных, перекрывает изображение на слоях, находящихся под ним. Таким образом, изображение на самом верхнем слое всегда видно полностью, тогда как изображения на нижних слоях могут быть видны лишь частично или не видны вовсе,; в зависимости от структуры изображений.

Слои в CSS в этом отношении очень похожи на слои графических редакторов. Фоном здесь служит основной код Web-страницы, а с помощью CSS вы можете какой-либо элемент вынести на отдельный слой. Сделать это можно, используя CSS-свойство z-index, Принимаемые этим свойством значения указывают порядковый номер слоя. Чем больше номер, тем выше слой находится в стопке слоев. Слой с номером 1 находится непосредственно над основной страницей, слой с номером 2 над первым и т.д. В результате слой с номером 2 будет ближе расположен к пользователю, просматривающему вашу страницу, чем слой с номером 1.

С помощью слоев в комбинации со свойством visibility можно создавать различные раскрывающиеся меню, динамично меняя значение свойства visibility для разных слоев. Для этого подменю располагаются на отдельных слоях, и когда пользователь щелкает на команде меню, на передний план выводится тот слой, в котором хранится выбранное пользователем подменю.

В последнее время на некоторых страницах часто наблюдается размещение на отдельном слое разного рода рекламной информации. Вы открываете страницу, а поверх ее основного содержимого располагается отдельный слой с рекламным Flash-роликом или просто статический рекламный текст. Спустя некоторый промежуток времени на этом слое появляется кнопка, позволяющая убрать рекламную информацию. Чаще всего эта кнопка оформляется наподобие кнопки закрытия окна в Windows - с изображением крестика (х). Щелкнув на ней, вы просто делаете слой невидимым, и он больше не мешает вам читать основной текст Web-страницы. Реализовать такой сценарий без слоев было бы довольно проблематично.

Пример - раскрывающееся меню

Вернемся к созданию раскрывающегося меню и попробуем детально рассмотреть процесс его создания. В целом, здесь нам понадобится знание CSS-позиционирования и основ работы со слоями, а также потребуется написать несколько однотипных функций на языке JavaScript, которые будут управлять работой нашего меню.

В первую очередь создадим основные компоненты сайта. Договоримся, что их будет три: заголовок сайта, строка меню и блок основного содержимого. Все три блока будут располагаться друг под другом, т.е. сайт будет верстаться в одну колонку.

Разобьем работу по созданию документа с раскрывающимся меню на этапы:

1. в первую очередь создадим структуру, образующую саму Web-страницу;
2. затем создадим подменю и разместим их на отдельных слоях;
3. в последнюю очередь напишем на JavaScript несколько функций и заставим наше меню работать.

Итак, для создания самой страницы нам потребуются три блока: заголовок, меню и блок основного содержимого страницы. Позиционировать их будем абсолютно, чтобы точно знать расстояние между блоками — это нам пригодится, когда придет время позиционировать блоки с подменю. Первый блок будет очень прост, назовем его #head. В нем расположится только один заголовок. Запишем стиль для этого блока:

#head { height: 50px; width: 100%; position: absolute; left: 0px; top: 0px; }

Мы задали ширину блока в 100%, чтобы он был на всю ширину окна браузера. Также мы зафиксировали высоту в 50 пикселей, при этом блок позиционируется в левый верхний угол экрана. Запишем его HTML-код:

<DIV ID="head"> <H1>Все о кино</H1> </DIV>

Внутри этого блока находится всего один заголовок. Запишем для него простой стиль, который выровняет его по правому краю и задаст синий цвет.

#head H1 {
color: Navy;
margin: 0em;
padding-right: 0.5em;
text-align: right;
}