|
Читать также: Слои в CSS Приходит время и любой начинающий верстальщик или веб-разработчик
сайтов сталкивается с такой проблемой, как слои. Хотя почему проблема?
Если изучите этот урок никаких проблем возникнуть не должно. Слои в CSS
накладываются друг на друга, то есть один блок может внезапно у вас
закрыть другой и т.д. Один раз я и сам столкнулся с неприятной
проблемой, когда рекламный блок закрыл часть меню (я правда быстро решил
эту проблему). Запомните, что любые позиционированные элементы на
страничке могут накладываться друг на друга.
До этого урока мы с вами рассматривали только два измерения. А теперь
представьте ещё одно измерение перпендикулярное экрану. Представили?
Так вот при верстке сайта и при наложении слоёв друг на друга можно
управлять этим наложением. Вообразите некоторую ось Z перпендикулярную
экрану. Наложение элементов по этой оси будет контролироваться свойством
z-index
В качестве значений у данного свойства используются целые числа
(положительные, отрицательные и нуль). Чем больше число, тем выше
располагается элемент. Синтаксис написания данного свойства имеет
следующий вид:
z-index: число
Приведу небольшой пример использования данного свойства:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>z-index</title>
<style type="text/css">
.box{ float:left;
border:1px solid #0CF;
width:35%}
#l1, #l2, #l3, #l4 {
position: relative; /* Относительное позиционирование */
}
#l1, #l3 {
font-size: 60px;
color: #000080;
}
#l2, #l4 {
top: -75px;
left: 5px;
color: #ffa500;
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>
В результате должно получиться следующее:
Следует отметить, что свойство z-index работает только для тех элементов, у которых задано значение position.
|