En CSS, la propiedad z-index se utiliza para controlar el orden de apilamiento de los elementos posicionados. Los elementos con un valor z-index más alto se colocarán delante de los elementos con un valor z-index más bajo. Esta propiedad es particularmente útil cuando tiene elementos superpuestos en una página web y desea controlar el orden en que aparecen.

A continuación se ofrece una descripción básica de cómo utilizar la propiedad z-index :

Sintaxis: 

 CSS
 selector {
  z-index: value;
}

Ejemplo: 

 HTML
 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .element1 {
      position: absolute;
      top: 50px;
      left: 50px;
      background-color: red;
      width: 100px;
      height: 100px;
      z-index: 2;
    }

    .element2 {
      position: absolute;
      top: 70px;
      left: 70px;
      background-color: blue;
      width: 100px;
      height: 100px;
      z-index: 1;
    }
  </style>
</head>
<body>
  <div class="element1"></div>
  <div class="element2"></div>
</body>
</html>

En este ejemplo, tenemos dos elementos absolutamente posicionados ( element1 y element2 ). La propiedad z-index se utiliza para controlar su orden de apilamiento. El cuadro rojo ( element1 ) tiene un z-index más alto que el cuadro azul ( element2 ), por lo que aparecerá delante del cuadro azul.

Tenga en cuenta algunos puntos clave:

  1. z-index solo funciona en elementos posicionados (elementos con un valor position distinto de static ).

  2. z-index valores pueden ser enteros positivos y negativos, e incluso números decimales.

  3. El contexto de apilamiento es crucial cuando se trabaja con z-index . Es posible que un elemento con un z-index superior no aparezca al frente si no está dentro del mismo contexto de apilamiento que los otros elementos. Comprender los contextos de apilamiento es importante para diseños más complejos.

Siéntete libre de modificar los valores y experimentar para ver cómo z-index afecta el orden de apilamiento de los elementos.