Свойство z-index
Описание
Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.
Синтаксис
z-index: число | auto;Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
.example-2 {
position: relative;
height: 140px;
}
.example-2-item {
width: 100px;
height: 100px;
position: absolute;
z-index: 1;
background-color: red;
}
.example-2-item.bg-green {
left: 20px;
top: 20px;
z-index: 3;
background-color: greenyellow;
}
.example-2-item.bg-black {
left: 40px;
top: 40px;
z-index: 2;
background-color: blue;
}
</style>
<div class='example-2'>
<div class='example-2-item bg-red'></div>
<div class='example-2-item bg-green'></div>
<div class='example-2-item bg-black'></div>
</div>
</body>
</html>Читайте также
Свойство flex
Сокращённое свойство, которое позволяет указать параметры элемента, чтобы он эффективно заполнял доступное пространство. Элементы могут быть растянуты...
Свойство transition
Универсальное свойство, которое позволяет одновременно задать значения transition-property, transition-duration, transition-timing-function и transiti...
Отображается ниже самого верхнего элемента в стеке по оси Z
Псевдоэлемент отображается ниже самого верхнего элемента в стеке по оси Z, но выше всех остальных элементов на странице, если они имеются. Обычно ::ba...
Свойство margin-left
Устанавливает величину отступа от левой границы текущего элемента до внутренней границы его родительского элемента....