Entendiendo z-index en CSS: Profundizando en el Orden de Apilamiento

Cuando se trata de diseñar páginas web con múltiples elementos superpuestos, el atributo z-index en CSS se convierte en una herramienta esencial. Este atributo controla el orden de apilamiento de elementos posicionados, permitiéndote determinar qué elementos se muestran delante de otros cuando se superponen.

Vamos a explorar cómo funciona el z-index con un ejemplo:

<style>
    .caja1 {
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
        top: 50px;
        left: 50px;
        z-index: 2;
    }

    .caja2 {
        width: 200px;
        height: 200px;
        background-color: blue;
        position: absolute;
        top: 100px;
        left: 100px;
        z-index: 1;
    }

    .caja3 {
        width: 200px;
        height: 200px;
        background-color: green;
        position: absolute;
        top: 150px;
        left: 150px;
        z-index: 3;
    }
</style>

<div class="caja1"></div>
<div class="caja2"></div>
<div class="caja3"></div>

En este ejemplo, hemos creado tres elementos con diferentes colores y posiciones. Cada uno tiene un z-index diferente:

• La .caja1 (roja) tiene un z-index de 2.
• La .caja2 (azul) tiene un z-index de 1.
• La .caja3 (verde) tiene un z-index de 3.

En este caso, la caja verde (.caja3) tiene el valor de z-index más alto, por lo que se superpone a las otras dos cajas. La caja roja (.caja1) tiene un z-index intermedio y está en el medio, mientras que la caja azul (.caja2) tiene el valor de z-index más bajo y está detrás de las otras dos.

Es importante recordar que el z-index solo se aplica a elementos con una posición establecida (como relative, absolute o fixed). Los elementos estáticos no se ven afectados por z-index.

En resumen, el z-index en CSS te permite controlar el orden de apilamiento de elementos superpuestos en tu diseño web, proporcionando una manera efectiva de gestionar qué elementos están delante y cuáles están detrás.