BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

В этом уроке я расскажу об интересной возможности создания слоев в 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" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Блок в css</title>
 <style type="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

Вот и все. Я думаю, вы поняли и во всем разобрались. Если будут вопросы, пишите в комментариях, отвечу.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 750
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 4136