Noções Básicas de Z-Index

Parte da seção Estilização com CSS do Journey de HTML da Coddy. Lição 59 de 76.

No CSS, a propriedade z-index controla a ordem de empilhamento dos elementos posicionados (elementos com uma posição diferente de static). Quando os elementos se sobrepõem, o z-index determina qual elemento aparece na frente e qual aparece atrás. Elementos com um valor de z-index mais alto são empilhados à frente dos elementos com um valor mais baixo.

Aqui está a sintaxe básica para usar a propriedade z-index:

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

position: relative; (ou absolute, fixed, ou sticky): O elemento deve estar posicionado para que o z-index tenha efeito.

value: Um valor inteiro que representa a ordem de empilhamento. Elementos com valores mais altos são empilhados na frente de elementos com valores mais baixos. O valor pode ser positivo, negativo ou zero.

Por exemplo:

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

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

Neste exemplo, tanto .box1 quanto .box2 estão posicionados de forma absoluta. Como o .box1 tem um valor de z-index maior, ele será empilhado na frente do .box2 quando eles se sobrepuserem.

Desafio

Fácil

Você recebeu um documento HTML com três divisões sobrepostas (<div>) com as classes box1, box2, e box3. Sua tarefa é usar a propriedade z-index para controlar a ordem de empilhamento desses elementos. Siga as etapas abaixo:

Escreva uma regra CSS que selecione o elemento <div> com a classe box1. Defina sua propriedade position como absolute, top como 0, left como 0, e z-index como 3.
Escreva uma regra CSS que selecione o elemento <div> com a classe box2. Defina sua propriedade position como absolute, top como 20px, left como 20px, e z-index como 2.
Escreva uma regra CSS que selecione o elemento <div> com a classe box3. Defina sua propriedade position como absolute, top como 40px, left como 40px, e z-index como 1.

Observe como os valores de z-index afetam a ordem de empilhamento das caixas, com a box1 no topo e a box3 na parte inferior.

Experimente você mesmo

<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>