Conceptos básicos de Z-Index

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 59 de 76.

En CSS, la propiedad z-index controla el orden de apilamiento de los elementos posicionados (elementos con una posición distinta de static). Cuando los elementos se superponen, el z-index determina qué elemento aparece encima y cuál aparece detrás. Los elementos con un valor de z-index más alto se apilan delante de los elementos con un valor más bajo.

Aquí tienes la sintaxis básica para usar la propiedad z-index:

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

position: relative; (o absolute, fixed, o sticky): El elemento debe estar posicionado para que z-index tenga efecto.

value: Un valor entero que representa el orden de apilamiento. Los elementos con valores más altos se apilan delante de los elementos con valores más bajos. El valor puede ser positivo, negativo o cero.

Por ejemplo:

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

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

En este ejemplo, tanto .box1 como .box2 están posicionados de forma absoluta. Debido a que .box1 tiene un valor de z-index más alto, se apilará delante de .box2 cuando se superpongan.

Desafío

Fácil

Se te proporciona un documento HTML con tres divisiones superpuestas (<div>) con las clases box1, box2 y box3. Tu tarea es utilizar la propiedad z-index para controlar el orden de apilamiento de estos elementos. Sigue los pasos a continuación:

Escribe una regla CSS que apunte al elemento <div> con la clase box1. Establece su propiedad position en absolute, top en 0, left en 0 y z-index en 3.
Escribe una regla CSS que apunte al elemento <div> con la clase box2. Establece su propiedad position en absolute, top en 20px, left en 20px y z-index en 2.
Escribe una regla CSS que apunte al elemento <div> con la clase box3. Establece su propiedad position en absolute, top en 40px, left en 40px y z-index en 1.

Observa cómo los valores de z-index afectan el orden de apilamiento de las cajas, con box1 en la parte superior y box3 en la parte inferior.

Hoja de referencia

La propiedad z-index controla el orden de apilamiento de los elementos posicionados. Los elementos con valores de z-index más altos aparecen delante de los elementos con valores más bajos.

Sintaxis básica:

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

Requisitos:

El elemento debe tener una posición distinta de static
El valor puede ser positivo, negativo o cero
Los valores más altos se apilan delante de los valores más bajos

Ejemplo:

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

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

Pruébalo tú mismo

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