33-Índice Z en CSS: Controla la Superposición 🧩

---

Índice Z en CSS

• Introducción al Índice Z
• Uso de la Propiedad `z-index`
• Contexto de Apilamiento
• Ejemplo Práctico
• Problemas Comunes con `z-index`

---

Introducción al Índice Z

El `z-index` es una propiedad de CSS que controla el apilamiento de elementos. Específicamente, determina el orden de apilamiento de los elementos cuando se superponen, y se usa principalmente con elementos posicionados (como `position: absolute`, `position: relative`, `position: fixed`, o `position: sticky`).

            <div style="position: relative; z-index: 1;">Elemento 1</div>
            <div style="position: relative; z-index: 2;">Elemento 2</div>
            <div style="position: relative; z-index: 3;">Elemento 3</div>
        

Ejemplos Visuales

---

Uso de la Propiedad `z-index`

Para usar `z-index`, simplemente se asigna un valor numérico a la propiedad. Los elementos con un valor de `z-index` mayor se apilan encima de aquellos con un valor menor. El valor predeterminado de `z-index` es `auto`, que coloca los elementos en el mismo nivel de apilamiento.

---

<div class="container my-4">
    <div class="text-dark p-3 rounded" style="background-color: #0b890b;"> 
        <h5 class="font-weight-bold" style="font-family: Georgia; font-size: 1.875rem;">
            Ejemplos Visuales
        </h5>
    </div>
    <br />
    <div class="border border-success p-3 rounded" style="position: relative; height: 400px; width: 400px;">
        <!-- Fondo de la imagen -->
        <div style="position: absolute; z-index: 1; background-color: #f2f2f2; width: 100%; height: 100%;">
            <!-- Fondo gris claro para ilustrar -->
        </div>
        
        <!-- Imagen más pequeña encima del fondo -->
        <img src="https://via.placeholder.com/200" alt="Imagen 1" style="position: absolute; z-index: 2; top: 50px; left: 50px; width: 200px; height: 200px;">

        <!-- Segunda imagen encima de la primera -->
        <img src="https://via.placeholder.com/150" alt="Imagen 2" style="position: absolute; z-index: 3; top: 100px; left: 100px; width: 150px; height: 150px;">
    </div>
</div>
        

---

Ejemplos Visuales: z-index

---

Contexto de Apilamiento

El contexto de apilamiento se refiere al área en la que los elementos con `z-index` son apilados. Cada contenedor que tenga un elemento con un `z-index` distinto de `auto` crea un nuevo contexto de apilamiento.

---

<div class="container">
    <div class="text-dark p-3 rounded" style="background-color: #0b890b;">
        <h5 class="font-weight-bold" style="font-family: Georgia; font-size: 1.875rem;">
            Contexto de Apilamiento
        </h5>
    </div>
    <br />
    <div class="border border-success p-3 rounded" style="position: relative;">
        <!-- Fondo de la imagen -->
        <div style="position: absolute; z-index: 1; background-color: #f2f2f2; width: 100%; height: 100%;">
            <!-- Fondo gris claro para ilustrar -->
        </div>
        
        <!-- Imagen más pequeña encima del fondo -->
        <img src="https://via.placeholder.com/200" alt="Imagen 1" style="position: absolute; z-index: 2; top: 50px; left: 50px; width: 200px; height: 200px;">

        <!-- Segunda imagen encima de la primera -->
        <img src="https://via.placeholder.com/150" alt="Imagen 2" style="position: absolute; z-index: 3; top: 100px; left: 100px; width: 150px; height: 150px;">
    </div>
</div>
        

---

Ejemplos Visuales

---

Ejemplo Práctico

A continuación, se muestra un ejemplo práctico de cómo se utiliza `z-index` para controlar el apilamiento de elementos:

<div style="position: absolute; z-index: 10; background-color: #ff5733; width: 100%; height: 100px; top: 0px;">
    index-10
</div>
<div style="position: absolute; z-index: 5; background-color: #33b5ff; width: 100%; height: 100px; top: 70px;">
    index-5
</div>
<div style="position: absolute; z-index: 20; background-color: #75ff33; width: 100%; height: 100px; top: 140px;">
    index-20
</div>
                

---

Ejemplos Visuales

index-10

index-5

index-20

---

Problemas Comunes con `z-index`

Uno de los problemas más comunes al usar `z-index` es cuando los elementos no se apilan como se espera. Esto puede ocurrir si los elementos no tienen una propiedad de posicionamiento, o si se crean múltiples contextos de apilamiento que interfieren entre sí. Aquí hay un ejemplo de cómo esto podría suceder:

<div style="background-color: #ff5733; width: 100%; height: 100px; top: 0px; margin: 10px;">
    Elemento 1 (sin `position`)
</div>

<div style="position: relative; background-color: #33b5ff; width: 100%; height: 100px; top: 70px; margin: 20px;">
    Elemento 2 (sin `z-index`)
</div>

<div style="position: relative; z-index: 10; background-color: #75ff33; width: 100%; height: 100px; top: 140px; margin: 30px;">
    Elemento 3 (con `z-index`)
</div>
                

Ejemplos Visuales

Elemento 1 (sin `position`)

Elemento 2 (sin `z-index`)

Elemento 3 (con `z-index`)

---

Ir al índice

---