Главная » Все про CSS » Слои в CSS. Свойство z-index

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

2014-05-28 / Вр:21:04 / просмотров: 6710

В этом уроке я расскажу об интересной возможности создания слоев в CSS.
Попробую объяснить, что такое слой. Уверен, все вы хотя бы раз в жизни делали аппликации из бумаги. К примеру, первый слой – небо, на небе вторым слоем солнышко, третьим слоем тучка. Вот это и есть те же самые слои в CSS. Тот, кто работал с аппликациями или в графическом редакторе Photoshop, CorelDRAW, меня поймут. А тех, кто все еще меня не понял, очень прошу проявить еще капельку терпения и посмотреть всё ниже на примерах.

Итак, чтобы создать слой в CSS воспользуйтесь свойством Z-index.
Слои нумеруются цифрами. Начинается слой с цифры 1, остальные слои идут по возрастанию и будут накрывать нижние.

z-index: 1;

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

Попробуем создать слои в CSS. Сначала я создам четыре блока. Как создать блоки в CSS, вы уже знаете.

<div class="blok1">1-ый блок</div>
<div class="blok2">2-ой блок</div> 
<div class="blok3">3-ий блок</div>
<div class="blok4">4-ый блок</div>

1-ый блок будет первым слоем. Присвоим ему z-index: 1.
2-ый блок будет вторым слоем. Присвоим ему z-index: 2.
3-ый блок будет третьим слоем. Присвоим ему z-index: 3.
4-ый блок будет четвертым слоем. Присвоим ему z-index: 4.

Присвою каждому блоку смещение с помощью позиционирования блока, чтобы было лучше видно, как слои ложатся и прикрывают друг друга.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Блок в css</title>
 <style ENGINE="text/css">
 .blok1 {
border:1px solid #000;
background: #ccc;
width:80px;
height:150px;
position: absolute;
padding:10px;
left: 200px;
top: 200px;
z-index: 1;
}
.blok2 {
border:1px solid #000;
background: #ccc;
width:80px;
height:150px;
position: absolute;
padding:10px;
left: 215px;
top: 230px;
z-index: 2;
}
.blok3 {
border:1px solid #000;
background: #ccc;
width:80px;
height:150px;
position: absolute;
padding:10px;
left: 230px;
top: 260px;
z-index: 3;
}
.blok4 {
border:1px solid #000;
background: #ccc;
width:80px;
height:150px;
position: absolute;
padding:10px;
left: 245px;
top: 290px;
z-index: 4;
}
 </style>
 </head>
 <body>
<div class="blok1">1-ый блок</div>
<div class="blok2">2-ой блок</div> 
<div class="blok3">3-ий блок</div>
<div class="blok4">4-ый блок</div>
 </body>
</html>

Результат:

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