Здравствуйте уважаемые посетители! В этой статье, мы поговорим о работе со слоями (атрибуте CSS 2.0 “z-index”).
Итак, начнём статью…
Атрибут z-index допустимо применять только к свободно позиционированным объектам, то есть у всех слоёв должен стоять атрибут position:relative.
Как можно догадаться из вида атрибута z-index, он определяет положение объектов по оси Z и создает, таким образом, иллюзию трёхмерности страницы. Любой элемент может быть выше или ниже другого.
По умолчанию значение атрибута z-index – auto. При этом значении элементы идут один за другим по порядку написания в коде. Атрибут может быть задан положительным, отрицательным числом, или нулём. Например:
z-index:5;
Объект с большим значением атрибута z-index будет перекрывать атрибут с меньшим его значением. То есть объект с z-index равным 5 перекроет объект с z-index равным 3.
Атрибут поддерживается Internet Explorer начиная с версии 4.0. Для тегов frame и iframe поддерживается Internet Explorer начиная с версии 5.5.
Применение атрибута
Атрибут z-index применяется чаще всего для позиционирования сложных и/или активных блоков. В остальных случаях, когда код более-менее прост, стараются обходиться без этого атрибута, ведь ничего не мешает расположить, в коде, объект, находящийся выше над объектом, находящимся ниже. Ещё есть некоторые проблемы при использовании атрибута z-index к активным блокам, да и есть множество более простых способов оформления.
Итак, не смотря на то, что без атрибута z-index можно легко прожить, он остаётся достаточно востребованным в современной вёрстке.
Практическая часть
В практической части этой статьи, мы сделаем эффект лёгкой тени для текста без использования картинок, зато с использованием слоёв и атрибута z-index. Итак, приступим…
Как обычно, создадим файлы index.html и style.css. Запишем в веб-страницу стандартный начальный код:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
Теперь, нам необходимо прописать два слоя текста: сам слой и слой тени. Запишем в index.html такой код:
<div id="text">Любой текст</div>
<div id="shadow">Любой текст</div>
</body>
</html>
Итак, мы закончили работать с HTML, пора переходить к CSS. Для начала, зададим стили для текста:
#text {
font:30px Tahoma;
position: relative;
color:#002f5f;
z-index:2;
}
Теперь, зададим стили для тени:
#shadow {
font:30px Tahoma;
position: relative;
color:#ccc;
top:-35px;
left:2px;
z-index:1;
}
Заметим, что z-index тени меньше, чем у самого текста. Это значит, что тень будет именно там, где и должна быть – под текстом. Если сделали всё правильно должно получиться так:
Вот и всё, что нужно знать об атрибуте z-index, областях его применения и работе с ним. Все вопросы – задавайте в комментарии, или на форуме, демо – на стандартном месте.
Спасибо за внимание!