El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

El índice Z (z-index) es una propiedad de CSS que controla el orden de apilamiento de los elementos en una página web. Es especialmente útil cuando se trabaja con elementos posicionados (por ejemplo, elementos con position: absolute, position: relative, position: fixed, o position: sticky). Esta propiedad determina qué elementos se superponen a otros.

Conceptos Clave

Orden de Apilamiento (Stacking Order):
- El orden de apilamiento es la forma en que los elementos HTML se superponen entre sí en el eje Z (perpendicular a la pantalla).
- Los elementos con un índice Z mayor se apilan sobre los elementos con un índice Z menor.
Contexto de Apilamiento (Stacking Context):
- Un contexto de apilamiento es un grupo de elementos con un orden de apilamiento particular.
- Se crea un nuevo contexto de apilamiento en los siguientes casos:
  - Un elemento raíz del documento (el elemento <html>).
  - Un elemento con una posición diferente a static y un índice Z distinto de auto.
  - Elementos con ciertas propiedades CSS como opacity menor a 1, transform, filter, perspective, entre otros.

Sintaxis

.element {
  position: relative; /* o absolute, fixed, sticky */
  z-index: 10; /* Valor del índice Z */
}

Ejemplo Práctico

Vamos a ver un ejemplo práctico para entender cómo funciona el z-index.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejemplo de z-index</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="caja caja1">Caja 1</div>
  <div class="caja caja2">Caja 2</div>
  <div class="caja caja3">Caja 3</div>
</body>
</html>

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.caja {
  width: 100px;
  height: 100px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 20px;
  font-family: Arial, sans-serif;
}

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

.caja2 {
  background-color: green;
  top: 100px;
  left: 100px;
  z-index: 2;
}

.caja3 {
  background-color: blue;
  top: 150px;
  left: 150px;
  z-index: 3;
}

Explicación del Código

HTML: Hemos creado tres div con la clase caja y clases adicionales caja1, caja2, y caja3.
CSS:
- Establecemos un contenedor body con display: flex para centrar los elementos.
- Cada div tiene una posición absolute para que podamos controlar su posición y orden de apilamiento.
- Asignamos diferentes valores de z-index a cada div:
  - caja1 tiene z-index: 1.
  - caja2 tiene z-index: 2.
  - caja3 tiene z-index: 3.

Resultado

caja3 (azul) se superpone a caja2 (verde) y caja1 (roja) debido a su mayor z-index.
caja2 se superpone a caja1 pero está debajo de caja3.

Ejercicio Práctico

Ejercicio

Crea una página con cuatro elementos posicionados de manera que se superpongan en el siguiente orden: caja4 sobre caja3, caja3 sobre caja2, y caja2 sobre caja1.

Solución

HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejercicio de z-index</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="caja caja1">Caja 1</div>
  <div class="caja caja2">Caja 2</div>
  <div class="caja caja3">Caja 3</div>
  <div class="caja caja4">Caja 4</div>
</body>
</html>

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.caja {
  width: 100px;
  height: 100px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 20px;
  font-family: Arial, sans-serif;
}

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

.caja2 {
  background-color: green;
  top: 100px;
  left: 100px;
  z-index: 2;
}

.caja3 {
  background-color: blue;
  top: 150px;
  left: 150px;
  z-index: 3;
}

.caja4 {
  background-color: purple;
  top: 200px;
  left: 200px;
  z-index: 4;
}

Explicación

Hemos añadido una cuarta caja (caja4) con z-index: 4.
caja4 se superpone a todas las demás cajas debido a su mayor z-index.

Conclusión

El z-index es una herramienta poderosa para controlar el orden de apilamiento de los elementos en una página web. Comprender cómo funciona y cómo crear contextos de apilamiento te permitirá diseñar interfaces más complejas y visualmente atractivas. Asegúrate de practicar con diferentes valores y configuraciones para dominar su uso.

Índice Z en CSS

Conceptos Clave

Sintaxis

Ejemplo Práctico

HTML

CSS

Explicación del Código

Resultado

Ejercicio Práctico

Ejercicio

Solución

HTML

CSS

Explicación

Conclusión

Maestría en CSS: De Principiante a Avanzado

Módulo 1: Introducción a CSS

Módulo 2: Estilización de Texto y Fuentes

Módulo 3: Modelo de Caja y Diseño

Módulo 4: Posicionamiento y Flotación

Módulo 5: Flexbox

Módulo 6: CSS Grid

Módulo 7: Técnicas Avanzadas de CSS

Módulo 8: Diseño Responsivo

Módulo 9: Preprocesadores y Frameworks

Módulo 10: Mejores Prácticas y Optimización

Módulo 11: Proyecto: Construyendo un Sitio Web Responsivo