CSS Макет - Свойство z-index
Свойство z-index определяет порядок стеке элемента.
CSS свойство z-index
Когда элементы расположены, они могут перекрывать другие элементы.
CSS свойство z-index определяет порядок расположения элемента в стеке (какой элемент должен быть размещен перед другими или позади них).
Элемент может иметь положительный или отрицательный порядок стека:
Это заголовок
Поскольку изображение имеет z-index, равный -1, оно будет размещено за текстом.
img
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Попробуйте сами »
Примечание: z-index работает только на позиционируемыми элементами (position: absolute, position: relative, position: fixed, или position: sticky) и флекс элементы
(элементы, являющиеся прямыми дочерними элементами display: flex).
Другой z-index
Здесь мы видим, что элемент с большим порядком стека всегда находится выше элемента, с меньшим порядком стека:
<html>
<head>
<style>
.container {
position: relative;
}
.black-box {
position: relative;
z-index: 1;
border: 2px solid black;
height: 100px;
margin: 30px;
}
.gray-box {
position: absolute;
z-index: 3;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}
.green-box {
position: absolute;
z-index: 2;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height:
100px;
}
</style>
</head>
<body>
<div class="container">
<div
class="black-box">Черный бокс</div>
<div class="gray-box">Серый бокс</div>
<div class="green-box">Зеленый бокс</div>
</div>
</body>
</html>
Попробуйте сами »
Без z-index
Если два позиционированных элемента перекрывают друг друга без указания z-index, элемент определенный последним в HTML-коде, будет показан сверху.
Тот же пример, что и выше, но здесь не указан z-index:
<html>
<head>
<style>
.container {
position: relative;
}
.black-box {
position: relative;
border: 2px solid black;
height: 100px;
margin: 30px;
}
.gray-box {
position: absolute;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}
.green-box {
position: absolute;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height:
100px;
}
</style>
</head>
<body>
<div class="container">
<div
class="black-box">Черный бокс</div>
<div class="gray-box">Серый бокс</div>
<div class="green-box">Зеленый бокс</div>
</div>
</body>
</html>
Попробуйте сами »
CSS cвойства перекрытия
| Свойство | Описание |
|---|---|
| z-index | Задает порядок стека элемента |