5.5. Слои и позиционирование документов
Обычно элементы web-страницы позиционируются относительно предыдущих элементов в коде HTML. С помощью средств CSS можно прибегнуть к позиционированию необходимых объектов в пределах электронного документа. Если позиционированным элементом является DIV, то говорят об отдельном слое в документе, так как этот элемент может размещаться на странице независимо от других элементов, перекрываясь с ними. Слои украшают web-страницу. Слой можно описать тегом <LAYER> (для Netscape Communicator) или DIV (для Internet Explorer) и наполнить нужным содержанием для последующего точного позиционирования на странице.
Существуют два типа визуального позиционирования элементов: абсолютное и относительное. Для описания каждого типа используются специальные свойства position и координаты top (вертикальная) и left (горизонтальная).
При абсолютном позиционировании (position: absolute) подразумевается четкое фиксирование выбранного элемента на странице, независимо от остальных элементов документа.
<IMG SRC="picture.gif" WIDTH="100" HEIGHT="100" ALT="Рисунок"
STYLE="position: absolute; top: 10px; left=25px;">
В данном случае графическое изображение абсолютно спозиционировано и размещается в 10 пикселах от верхнего и в 25 пикселах от левого края своего родительского элемента (в качестве родительского элемента выступает верхняя левая точка структуры документа).
Таким образом, абсолютное позиционирование позволяет отображать элементы на экране, используя реальные координаты, отсчитываемые от левого верхнего угла окна браузера. Применение этих свойств иллюстрирует HTML-код страницы (см. также рис. 5.6).
<HTML>
<HEAD>
<TITLE> Абсолютное позиционирование в CSS </TITLE>
<STYLE TYPE="text/css">
<!--
.area1 {
position: absolute; top: 10; left:10;
color: red; font-weight: bolder; font-size: 40pt;
background: aqua; padding-right: 12pt;
}
.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="image007.gif" width="50"
height="50">Где</DIV>
<DIV CLASS="area2"> начало того конца,</DIV>
<DIV CLASS="area3"> которым оканчивается начало? </DIV>
</BODY>
</HTML>
Относительное позиционирование (position: relative) позволяет расположить выбранный объект в зависимости от размещения остальных элементов документа (т. е. относительно других объектов страницы).
<DIV ID="text" STYLE="position: relative; top: 50px; left: 50px; ">
Рис. 5.6. Абсолютное позиционирование
При таком позиционировании элемент участвует в обычном последовательном форматировании документа. За начало координат принимается та точка, в которой элемент был размещен без позиционирования. Алгоритм относительного форматирования можно представить следующим образом. Сначала браузер размещает элемент на странице, выполняя обычное форматирование, а затем по указанию left и top смещает его на заданные значения. В следующем примере HTML-кода применено относительное позиционирование (см. также рис. 5.7).
<HTML>
<HEAD>
<TITLE> Относительное позиционирование в CSS </TITLE>
</HEAD>
<BODY BGCOLOR="white" TEXT="black">
<H1> Относительное позиционирование</H1>
<P>
<IMG SRC="image007.gif" width="50" height="50" align="left" hspace="10" style="position: relative; left: 0px; top: 50px;">
В этом примере картинка смещена вниз на 50 пикселов
относительно того места, которое она занимала бы на экране при
отсутствии позиционирования
</P>
<BR clear=left>
</BODY>
</HTML>
Рис. 5.7. Относительное позиционирование
Отойти от плоского представления на экране позволяет свойство z-index. Это стилевое свойство позволяет указывать, в каком слое (на каком уровне) находится элемент на экране. Номер основного уровня, на который выводятся обычные элементы без стилевых указаний, равен нулю. Следовательно, элементы с отрицательным z-index расположены ниже (дальше), с положительным – выше (ближе) основного экранного слоя. Если элементы имеют одинаковый z-index, то они расположены в одном слое. В противном случае ближе к нам расположен слой, имеющий больший z-index.
Приведенный ниже пример HTML-кода демонстрирует свойство z-index, а его отображение в браузере представлено на рис. 5.8.
Рис. 5.8. Применение стилевого свойства z-index
<HEAD>
<TITLE> z-index </TITLE>
</HEAD>
<BODY BGCOLOR="white" TEXT="black">
<H2>z-index </H2>
<HR> <P>
<DIV STYLE="position: absolute; top: 50; left: 140;
height: 130; width: 100;
color: white; font-size: 60;
background: red; z-index:3">
Это ближе</DIV>
<DIV STYLE="position: absolute; top: 50; left: 360;
height: 30; width: 100;
color: white; font-size: 30;
background: blue; z-index: 1">
Это дальше</DIV>
<DIV STYLE="position: absolute; top: 80; left: 270;
width: 125; z-index: 2">
<IMG SRC="image007.gif" width=125 height=125></DIV>
</BODY>
</HTML>
* * *
Итак, вы узнали обо всем, что касается таблиц стилей, начиная от теории, вопросов о необходимости их применения и заканчивая примерами. Последовательно был представлен материал по видам селекторов и правил описания CSS, а также варианты их использования: встраивание, подключение и связывание. Были рассмотрены принцип наследования и каскадирования, многообразие стилей, с помощью которых можно сделать свою страницу совершенно уникальной. Вы узнали о возможности использования простых слоев и позиционирования элементов.
Практическое задание