Свойство 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>Читайте также
Свойство position
Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на ...
Свойство height
Утанавливает высоту элементов. Она не включает толщину границ вокруг элемента, значение отступов ...
Правило @font-face
Правило @font-face позволяет определить настройки шрифтов, а также загрузить специфичный шрифт на...
Свойство float
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтек...
Свойство padding-inline-start
Определяет конечный внутренний отступ элемента по строчной оси. В зависимости от значения свойств...