---

<h1>Практическая работа № 7</h1>

<div class="examples">

    <section>
        <h2>Вариант 1</h2>
        <div class="scene v1">
            <div class="square red">1</div>
            <div class="square green">2</div>
            <div class="square blue">3</div>
        </div>
    </section>

    <section>
        <h2>Вариант 2</h2>
        <div class="scene v2">
            <div class="square red">1</div>
            <div class="square green">2</div>
            <div class="square blue">3</div>
        </div>
    </section>

    <section>
        <h2>Вариант 3</h2>
        <div class="scene v3">
            <div class="square red">1</div>
            <div class="square green">2</div>
            <div class="square blue">3</div>
        </div>
    </section>

    <section>
        <h2>Вариант 4</h2>
        <div class="scene v4">
            <div class="square red">1</div>
            <div class="square green">2</div>
            <div class="square blue">3</div>
        </div>
    </section>

</div>


/* Расположение четырёх схем */
.examples {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.examples section {
    width: 260px;
}

/* Область для трёх квадратов */
.scene {
    position: relative;
    width: 220px;
    height: 180px;
    border: 1px solid black;
}

/* Общие свойства квадратов */
.square {
    position: absolute;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-weight: bold;
}

/* Цвета квадратов */
.red {
    background-color: red;
    left: 20px;
    top: 20px;
}

.green {
    background-color: green;
    left: 60px;
    top: 40px;
}

.blue {
    background-color: blue;
    left: 90px;
    top: 60px;
}

/* Вариант 1 */
.v1 .red {
    z-index: 1;
}

.v1 .green {
    z-index: 3;
}

.v1 .blue {
    z-index: 2;
}

/* Вариант 2 */
.v2 .red {
    z-index: 3;
}

.v2 .green {
    z-index: 1;
}

.v2 .blue {
    z-index: 2;
}

/* Вариант 3 */
.v3 .red {
    z-index: 2;
}

.v3 .green {
    z-index: 1;
}

.v3 .blue {
    z-index: 3;
}

/* Вариант 4 */
.v4 .red {
    z-index: 1;
}

.v4 .green {
    z-index: 2;
}

.v4 .blue {
    z-index: 3;
}