Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Css » Sloi-v-css-svojstvo-z-index

Слои в CSS. Свойство z-index

Приходит время и любой начинающий верстальщик или веб-разработчик сайтов сталкивается с такой проблемой, как слои. Хотя почему проблема? Если изучите этот урок никаких проблем возникнуть не должно. Слои в 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 в CSS

Следует отметить, что свойство z-index работает только для тех элементов, у которых задано значение position.



наверх