Свойство CSS z-index
Свойство z-index задаёт порядок наложения позиционированных элементов, который определяет, находится ли элемент перед или позади других.
Когда элементы позиционированы, они могут перекрываться. Элемент может иметь положительный или отрицательный порядок наложения.
Примечание: z-index работает только для позиционированных элементов (position установлен в absolute, relative, fixed или sticky) и для flex-элементов.
Пример
Блок с z-index: -1 расположен позади текста.
<style> расположите цветной блок абсолютно в левом верхнем углу с z-index -1 (заменитель изображения), чтобы он находился позади текста. Добавьте заголовок и абзац поверх него.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.bgbox {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
width: 220px;
height: 140px;
background-color: #4CAF50;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<div class="bgbox"></div>
<p>Because the box has a z-index of -1, it is placed behind the text.</p>
</body>
</html>
Ещё один пример z-index
Позиционированный элемент с более высоким порядком наложения всегда находится перед элементом с более низким порядком наложения.
Пример
Три перекрывающихся блока располагаются по их z-index: серый блок (3) сверху, затем зелёный блок (2), затем чёрный блок (1).
<style> создайте относительный контейнер с тремя перекрывающимися блоками: black-box (z-index 1), gray-box (z-index 3) и green-box (z-index 2), каждый расположен так, чтобы они перекрывались. Более высокий z-index отображается сверху. Добавьте три блока внутри контейнера.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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">Black box (z-index: 1)</div>
<div class="gray-box">Gray box (z-index: 3)</div>
<div class="green-box">Green box (z-index: 2)</div>
</div>
</body>
</html>
Без z-index
Если перекрывающиеся позиционированные элементы не имеют z-index, они располагаются в том порядке, в котором появляются в исходном коде HTML: более поздние элементы отображаются сверху.
Пример
Те же блоки без z-index располагаются в порядке исходного кода.
<style> создайте относительный контейнер с тремя перекрывающимися блоками (black-box, gray-box, green-box) без z-index, расположенными так, чтобы они перекрывались. Без z-index они располагаются в порядке, в котором появляются в HTML. Добавьте три блока внутри контейнера.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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">Black box</div>
<div class="gray-box">Gray box</div>
<div class="green-box">Green box</div>
</div>
</body>
</html>
Свойство CSS
Свойство, рассматриваемое на этой странице — z-index, которое задаёт порядок наложения позиционированного элемента.