CSS свойство z-index
Добрый вечер, сегодня я предлагаю разобрать тему наложения слоев в CSS. А именно, мы разберем CSS свойство z-index, которое позволяет определять порядок наложения с позиционированных элементов на странице. Например, мы можем накладывать текст, изображения друг на друга и при этом задавать какой текст или изображение будет находиться выше или ниже. Для этого мы с Вами разберем пример, в котором будем использовать блоки. И для начала напишем простую структуру, которая будет взята за основу.
<html>
<head>
<title>CSS свойство z-index</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div class="block1"></div>
<div class="block2"></div>
</body>
</html>
После того как вы написали HTML код, приступаем к реализации нашей задачи и в CSS стилях пишем следующее:
.block1 {
background: #d99;
position: relative;
height: 100px;
z-index: 2;
width: 100px;
}
.block2 {
background: #d09;
margin: -35px 15px 0 15px;
position: relative;
height: 70px;
z-index: 1;
width: 70px;
}
Начинаем разбираться. Мы создали два блока с определенной шириной и высотой, также задали им цвет фона и относительное позиционирование. Позиционирование задано для того, чтобы у нас работало css свойство z-index. И последнее что мы сделали, это задали z-index для обоих блоков, но с разными значениями. Хотелось бы заметить, что в качестве значений свойство должно принимать целые числа, в том числе можно использовать и отрицательные. Чем больше число у данного свойства, тем выше будет находиться элемент, к которому оно применяется. В нашем случае элемент с классом block1 будет лежать поверх второго блока, т.к., значение изучаемого свойства выше. Таким образом, мы получаем так называемый 3D-эффект, если посмотреть вглубь экрана вашего монитора и представить его в качестве куба, т.е., с еще одной осью, которая прокладывается перпендикулярно вашему экрану. В качестве полученного результата Вы можете посмотреть на изображение:
Это все, что я хотел Вам сегодня рассказать, думаю, данный урок стал для Вас полезным, и некоторые задачи Вы будете реализовывать гораздо проще. На этом я с Вами прощаюсь, до скорого.
