ь на страницу заголовок уровня 2. Как раз наоборот, браузер сна- 
чала помещает на страницу заголовок уровня 2 на расстоянии 100 пикселей от 
верхнего и на расстоянии 50 пикселей от левого края страницы. Затем поверх за- 
головка уровня 2 Web-браузер поместит заголовок уровня 1. Таким образом, ког- 
да стиль каскадного списка стиля заставляет браузер поместить элемент в поло- 
жение, где уже находится другой элемент страницы, браузер помещает новый 
элемент на слой поверх существующего элемента, если, конечно, заранее не уста- 
новить значение параметра z- index. 
Свойство z-index каскадных списков стилей позволяет выбирать слой, в ко- 
торый Web-браузер поместит элемент. При написании HTML-кода можно быстро 
запутаться, если одновременно использовать свойства позиционирования каскад- 
ных списков стилей и свойство z-index, которое контролирует взаимное нало- 
жение элементов страницы. 
Третья размерность, контролируемая с помощью свойства z-index, представляет 
собой указание по размещению элемента страницы по оси, перпендикулярной 
плоскости страницы. Чем меньше значение свойства z-index, тем ближе эле- 
мент к поверхности страницы. И, соответственно, чем больше значение свойства 
z-index, тем дальше находится слой элемента от поверхности страницы. Таким 
образом, если в HTML-код из предыдущего примера добавить следующие объяв- 
ления свойства z-index, Web-браузер будет выводить на экран заголовок уровня 
2 поверх заголовка уровня 1, как показано на рис. 4.25. 
 
Текст заголовка уровня-2 text
 
 
Текст заголовка уровня-1 text 
Значение свойства z-index для первого элемента больше, чем для второго. 
Как результат Web-браузер будет выводить на экран первый элемент (заголовок 
уровня 2) на слое поверх второго элемента (заголовка уровня 1). 
Несмотря на то что значения свойства z-index могут быть отрицатель- 
ными, равными нулю или положительными, используйте только ноль и положительные 
значе- 
ния. Некоторые версии Web-браузеров неправильно позиционируют элементы с 
отрицатель- 
ными значениями свойства z-index (поверх элементов с положительными значениями).
 
Помните, что значение свойства z-index представляет собой относительное 
измерение. 
Таким образом, один элемент страницы можно поместить за другим за счет указания 
мень- 
шего (и не обязательно отрицательного) значения z-index.

Глава 4. Каскадные списки стилей 231 
Файл Правка Дид •Избранное Овраис .правко 
j . ^ '.:-.. Г.-^.^З.Й: :$ JJ ^ - > > Ш * . :;.:.•. 
1 бдрес!^] bftp//h\m\-webdesiqri/Cb&p\erOA/Fiq{}reQ4-25.btm vj! 
' • • • • • • • • -' ••• 
|Текст заголовка уровня-2 text 
уровня-1 text 
'I 
Рис. 4.25. Элемент с большим значением свойства z - i n d e x находится 
поверх элемента с меньшим значением свойства z-index 
Передача списка стилей через функцию проверки 
Передача каскадного списка стилей через функцию проверк*| чем-то напоми- 
нает проверку учителем вашего домашнего задания по каскаднкм спискам сти- 
лей перед получением окончательной оценки. Помимо проверки наличия оши- 
бок (например, неверных свойств или значений свойства), функция проверки 
каскадных списков стилей, находящаяся по адресу http://jigsaw.w3.
org/cssvaiidator/ 
также дает рекомендации по улучшению. Например, если передать 
следующий внешний каскадный список стилей функции проверки каскадных 
списков стилей комитета W3C, вы получите отчет, показанный на рис. 4.26: 
SI» 
Errors 
URI: (il6:J)localhost;C:fioute04-01d.css 
. Line: 0 Context : body 
Parse Error - colorbrown} 
Warnings 
URI : file:A1ocalhost.'C:\Rqure04-01cl.css 
* Line : 0 font-family: You are encouraged to offer a generic family as a last 
alternative 
Valid CSS information 
i hi { 
color : blue; 
font-si2e : 40px; 
font-family : garamond; 
color : white, 
background : green; 
font-family : helvetica; 
text-indent : lcm; 
Рис. 4.26. Отчет о проверке каскадного списка стилей от функц