Абсолютное позиционирование
При помощи CSS можно отображать элементы на экране, используя реальные координаты, отсчитываемые от левого верхнего угла окна браузера. Такую возможность предоставляет стилевое свойство position со значением absolute. Сами координаты задаются при помощи свойств left (горизонтальная координата) и top (вертикальная координата).
Применение этих свойств иллюстрирует следующий пример (пример 3.8, рис. 3.7).
Пример 3.8
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html">
<TITLE> Абсолютное позиционирование </TITLE>
<STYLE type="text/css">
<!--
.area1 {position:absolute;top:10;left:10; color:red; font-weight:bolder;
font-size:40pt; background:aqua; }
.area2 {position: absolute; top:20; left:150; color: maroon; background:#CFB597;
padding:12pt; }
.area3 {position: absolute;top:70;left:130; color:blue;background:#C0C0C0;
padding: 12pt; }
-->
</STYLE>
</HEAD>
<BODY bgcolor = white text = black>
<DIV class=area1><IMG src = vopros.gif> Где </DIV>
<DIV class = area2>начало того конца,</DIV>
<DIV class = area3>которым оканчивается начало?</DIV>
</BODY>
</HTML>
Рис. З.7. Абсолютное позиционирование
Как видите, браузер разместил три заданные тегами <div>, области в указанные координаты. При этом области перекрывают друг друга.
Ближе к пользователю получается та область, которая следует в HTML-коде последней. Если переставить порядок следования тегов <div> в программе, то и порядок наложения областей друг на друга изменится. Однако CSS предоставляет программисту и другой, более гибкий инструмент для управления порядком наложения элементов. Это — z-index.
Z-index
Этот стилевое свойство позволяет указывать, в каком слое (на каком уровне) находится элемент на экране. Номер основного уровня (на который выводятся обычные элементы без стилевых указаний) равен нулю. Следовательно, элементы с отрицательным z-index расположены ниже (дальше), с положительным — выше (ближе) основного экранного слоя. Если элементы имеют одинаковый z-index, то они расположены в одном слое. В противном случае ближе к нам расположен слой, имеющий больший z-index.
Приведенный ниже пример демонстрирует свойство z-index (пример 3.9, рис. 3.8).
Пример 3.9
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html">
<TITLE> Z-index </TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<H2>Z-index</H2>
<HR>
<DIV style= "position:absolute;top:50;left:140;
height:130; width:100;background:red;
font-size:60;color:white;z-index:3">
Это ближе </DIV>
<DIV style="position:absolute;top:50;left:360;
height:30; width:100; background:blue;
font-size:30; color:white; z-index:1">
Это дальше</DIV>
<DIV style="position:absolute; top:80; left:270;
width:125; z-index:2">
<IMG src=img555.jpg width=125 height=82 alt =""></DIV>
</BODY>
</HTML>
Рис. З.8. Z-index