|
Рассмотрим такое
понятие, как слой в CSS. Для тех, кто работал с графическими редакторами.
Создавая блок в
CSS, всегда четко задаем его параметры, а также позиционируем его в
определенное место на экране. Таким образом, любой блок имеет две координаты
X и Y, которые определяют положение блока на плоскости экрана. Но в CSS есть
еще и третья, пространственная координата Z, которая определяет номер слоя,
на котором находится блок. Т.е. чем больше координата Z, тем выше этот слой
находится по отношению к остальным. Например слой с номером 2 будет ближе
расположен к пользователю, просматривающему вашу страницу, чем слой с
номером 1. А слой с номером 1, будет располагаться выше, чем основной код
страницы.
За создание слоя
в CSS отвечает свойство
Z-index, а принимаемые им
значения, указывают номер слоя.
В качестве
значений у данного свойства используются целые числа (положительные,
отрицательные и нуль). Чем больше число, тем выше располагается элемент.
Синтаксис написания данного свойства имеет следующий вид:
Пример:
Как видите,
каждая карта, немного перекрывает другую. Вот как это выглядит в коде:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<style type="text/css">
.box{ float:left;
border:10px solid #0CF;
width:20%}
#l1, #l2, #l3, #l4 {
position: relative;
}
#l1, #l3 {
font-size: 60px;
color: #009980;
}
#l2, #l4 {
top: -75px;
left: 5px;
color: #ffa599;
font-size:80px;
}
#l1 { z-index: 2; }
#l2 { z-index: 1; }
#l3 { z-index: 4; }
#l4 { z-index: 3; }
</style>
</head>
<body>
<div class="box">
<p>Слой 1 сверху</p>
<div id="l1">Слой 1</div>
<div id="l2">Слой 2</div>
</div>
<div class="box">
<p>Слой 4 снизу</p>
<div id="l3">Слой 3</div>
<div id="l4">Слой 4</div>
</div>
</body>
</html>
нажмите чтобы увидеть результат
Если хорошенько
разобраться с этим простым методом, можно создавать довольно приличные вещи.
Например размещать текст над изображением, или наоборот, создавать красивые
заголовки, например с эффектом тени, также если поглубже изучить слои, можно
создавать выпадающие меню , и многое другое...
|