Основы Z-Index

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 59 из 76.

В CSS свойство z-index управляет порядком наложения позиционированных элементов (элементов со значением position, отличным от static). Когда элементы перекрывают друг друга, z-index определяет, какой элемент будет отображаться сверху, а какой — снизу. Элементы с более высоким значением z-index располагаются перед элементами с более низким значением.

Вот базовый синтаксис для использования свойства z-index:

selector {
    position: relative; /* или absolute, fixed или sticky */
    z-index: value;
}

position: relative; (или absolute, fixed, или sticky): Элемент должен быть позиционирован, чтобы z-index имел эффект.

value: Целочисленное значение, которое определяет порядок наложения. Элементы с более высокими значениями располагаются перед элементами с более низкими значениями. Значение может быть положительным, отрицательным или нулевым.

Например:

.box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 2;
}

.box2 {
    position: absolute;
    top: 70px;
    left: 70px;
    z-index: 1;
}

В этом примере оба .box1 и .box2 позиционированы абсолютно. Так как .box1 имеет более высокое значение z-index, он будет располагаться перед .box2 при их перекрытии.

Задание

Легко

Вам дан HTML-документ с тремя перекрывающимися блоками (<div>) с классами box1, box2 и box3. Ваша задача — использовать свойство z-index для управления порядком наложения этих элементов. Выполните следующие шаги:

Напишите CSS-правило для элемента <div> с классом box1. Установите его свойство position в значение absolute, top в 0, left в 0 и z-index в 3.
Напишите CSS-правило для элемента <div> с классом box2. Установите его свойство position в значение absolute, top в 20px, left в 20px и z-index в 2.
Напишите CSS-правило для элемента <div> с классом box3. Установите его свойство position в значение absolute, top в 40px, left в 40px и z-index в 1.

Обратите внимание, как значения z-index влияют на порядок наложения блоков: box1 оказывается сверху, а box3 — снизу.

Шпаргалка

Свойство z-index управляет порядком наложения позиционированных элементов. Элементы с более высокими значениями z-index отображаются перед элементами с более низкими значениями.

Базовый синтаксис:

selector {
    position: relative; /* или absolute, fixed или sticky */
    z-index: value;
}

Требования:

Элемент должен иметь позиционирование, отличное от static
Значение может быть положительным, отрицательным или нулевым
Более высокие значения располагаются перед более низкими

Пример:

.box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 2;
}

.box2 {
    position: absolute;
    top: 70px;
    left: 70px;
    z-index: 1;
}

Попробуйте сами

<html>
<head>
    <title>Z-Index Basics</title>
    <style>
        .box1 {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: lightgreen;
        }
        .box3 {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="box1">Box 1</div>
    <div class="box2">Box 2</div>
    <div class="box3">Box 3</div>
</body>
</html>