Contexto de superposición

2.1 Propiedad z-index

El contexto de superposición en CSS se gestiona con la propiedad z-index y determina cómo los elementos se superponen entre sí en el eje Z (la tercera coordenada, perpendicular a la pantalla). Comprender y usar bien z-index y el contexto de superposición permite crear diseños complejos y dinámicos con elementos superpuestos.

Fundamentos del contexto de superposición

El contexto de superposición determina cómo se mostrarán los elementos uno encima del otro. Cada elemento en una página web tiene un nivel de superposición que puede ser cambiado usando la propiedad z-index.

Reglas de superposición

1. Posición en el árbol del documento: los elementos que están más abajo en el árbol del documento se superponen a los elementos que están más arriba.
2. Propiedad z-index: los elementos con un valor de z-index más alto se superponen a los elementos con un valor de z-index más bajo.

Fundamentos de z-index

La propiedad z-index define el orden de superposición de los elementos cuando se superponen entre sí. Los elementos con un valor de z-index más alto se muestran sobre los elementos con un valor más bajo. z-index solo se aplica a los elementos con posicionamiento (position: relative, absolute, fixed o sticky).

Sintaxis:

    
      .element {
        position: relative; /* o absolute, fixed, sticky */
        z-index: number;
      }
    
  

Donde:

• number: un número entero que puede ser positivo o negativo. Cuanto más alto el valor, más alto estará el elemento en el orden de superposición

Ejemplo de uso de z-index:

En este ejemplo, Box 2 con z-index: 2; se mostrará sobre Box 1 y Box 3, y Box 1 se mostrará sobre Box 3.

    
      .wrapper {
        min-height: 300px;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: 1;
        top: 50px;
        left: 50px;
        background-color: red;
      }

      .box2 {
        z-index: 2;
        top: 100px;
        left: 100px;
        background-color: blue;
      }

      .box3 {
        z-index: 0;
        top: 150px;
        left: 150px;
        background-color: green;
      }
    
  

    
      <div class="wrapper">
        <div class="box box1">Box 1</div>
        <div class="box box2">Box 2</div>
        <div class="box box3">Box 3</div>
      </div>
    
  

2.2 Contexto de superposición (stacking context)

El contexto de superposición es un grupo de elementos que se considera como una sola unidad al determinar el orden de superposición. El contexto de superposición se crea cuando se cumplen ciertas condiciones, como aplicar z-index con posicionamiento o tener otras propiedades CSS.

Creación de contexto de superposición

Se crea un contexto de superposición en los siguientes casos:

1. El elemento tiene posicionamiento relative, absolute, fixed o sticky y un valor de z-index diferente de auto.
2. El elemento tiene una propiedad opacity con un valor inferior a 1.
3. El elemento tiene una propiedad transform, filter, perspective, clip-path, mask o mask-image, diferente del valor por defecto.
4. El elemento tiene una propiedad contain con un valor de layout, paint, o strict.

Ejemplo de creación de contexto de superposición:

    
      .parent {
        position: relative;
        z-index: 10;
        min-height: 300px;
        padding: 20px;
        color: white;
        background-color: #f1c40f;
      }

      .child-blue {
        position: absolute;
        z-index: 1;
        top: 50px;
        left: 50px;
        min-width: 125px;
        min-height: 125px;
        background-color: #3498db;
      }

      .child-red {
        position: absolute;
        z-index: 2;
        top: 100px;
        left: 100px;
        min-width: 125px;
        min-height: 125px;
        background-color: #e74c3c;
      }
    
  

    
      <div class="parent">
        Elemento padre
        <div class="child-blue">1</div>
        <div class="child-red">2</div>
      </div>
    
  

Explicación del código:

• .parent: elemento con position: relative; y z-index: 10;, que crea un nuevo contexto de superposición
• .child-blue: elemento con position: absolute; y z-index: 1;, que está en el nuevo contexto de superposición creado por el elemento padre
• .child-red: elemento con position: absolute; y z-index: 2;, que también está en el nuevo contexto de superposición creado por el elemento padre, y se situará sobre .child-blue

2.3 Interacción de contextos de superposición

Los elementos dentro de un contexto de superposición no pueden superponerse a elementos de otro contexto de superposición, a menos que se cambie el orden de los propios contextos. Esto significa que los elementos con un z-index más alto dentro de un contexto de superposición siempre se mostrarán sobre los elementos con un z-index más bajo en el mismo contexto.

Ejemplo de interacción de contextos de superposición:

    
      .wrapper {
        min-height: 500px;
      }

      .container1 {
        position: relative;
        z-index: 10;
        padding: 20px;
        margin-bottom: 200px;
        background-color: lightgrey;
      }

      .container2 {
        position: relative;
        z-index: 20;
        padding: 20px;
        background-color: lightpink;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: 1;
        top: 50px;
        left: 50px;
        background-color: red;
      }

      .box2 {
        z-index: 2;
        top: 100px;
        left: 100px;
        background-color: blue;
      }
    
  

    
      <div class="wrapper">
        <div class="container1">
          <div class="box box1">Box 1</div>
          <div class="box box2">Box 2</div>
        </div>

        <div class="container2">
          <div class="box box1">Box 3</div>
          <div class="box box2">Box 4</div>
        </div>
      </div>
    
  

En este ejemplo, el contenedor .container2 con z-index: 20; se mostrará sobre el contenedor .container1 con z-index: 10;. Los elementos dentro de cada contenedor se distribuirán de acuerdo a su z-index, pero no se superpondrán a los elementos de otro contenedor.

2.4 Valores negativos de z-index

z-index puede tomar valores negativos, lo que permite colocar elementos por debajo de otros elementos con valores de z-index cero o positivos.

    
      .container {
        min-height: 300px;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: -1;
        top: 100px;
        left: 100px;
        background-color: #3498db;
      }

      .box2 {
        z-index: 0;
        top: 150px;
        left: 150px;
        background-color: #e74c3c;
      }
    
  

    
      <div class="container">
        <div class="box box1">-1</div>
        <div class="box box2">0</div>
      </div>
    
  

Explicación del código:

• .box1: Elemento con z-index: -1;, que se situará por debajo del elemento con z-index: 0;

Consejos para usar z-index:

• Minimiza el uso de z-index: intenta utilizar z-index solo cuando sea realmente necesario. Esto ayuda a evitar estructuras de superposición complejas y confusas.
• Crea contextos de superposición conscientemente: crear nuevos contextos de superposición ayuda a gestionar la superposición de elementos, pero puede complicar la estructura del documento.
• Usa valores de z-index semánticamente significativos: asigna valores de z-index de manera lógica, por ejemplo, usa valores positivos para elementos superiores y negativos para inferiores.