Слои в CSS. Свойство z-index
Опубликовано: 01.09.2018
В этом уроке я расскажу об интересной возможности создания слоев в CSS.
Попробую объяснить, что такое слой. Уверен, все вы хотя бы раз в жизни делали аппликации из бумаги. К примеру, первый слой – небо, на небе вторым слоем солнышко, третьим слоем тучка. Вот это и есть те же самые слои в CSS. Тот, кто работал с аппликациями или в графическом редакторе Photoshop, CorelDRAW, меня поймут. А тех, кто все еще меня не понял, очень прошу проявить еще капельку терпения и посмотреть всё ниже на примерах.Итак, чтобы создать слой в CSS воспользуйтесь свойством Z-index .
Слои нумеруются цифрами. Начинается слой с цифры 1, остальные слои идут по возрастанию и будут накрывать нижние.z-index: 1 ;
Попробуем создать слои в 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 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 , основы