Planificación de interfaces web

1.9 PROPIEDAD Z-INDEX

¿Qué es la propiedad Z-Index?

La propiedad Z-Index, es la que establece el orden de los elementos en un sitio web (denomina que elementos van delante y cuáles detrás).
Siempre por defecto el Z-index es auto (el navegador calcula por defecto el orden de apliamiento).

Orden de apilamiento

El orden que toma el navegador para ordenar los elementos es:

  1. Elementos posicionados con Z-Index positivo (con valor más de 1).
  2. Elementos posicionados sin Z-Index (con valor auto).
  3. Elementos no posicionados (sin ningún tipo de position).
  4. Elementos con Z-Index negativo (con valor menor de -1).

Normas con Z-Index

A la hora de usar Z-Index, debemos de:

  • Usar rangos de números (no usar números consecutivos de Z-Index).
  • Nunca el padre podrá estar por delante del hijo (solo podremos solucionarlo estableciendo al padre un Z-Index por defecto y al hijo un Z-Index negativo).

EJEMPLOS DE Z-INDEX

div.rojo {
     position: absolute;
     top: 20px;
     z-index: 20;
}

div.verde {
     position: relative;
     top: 0px;
     z-index: 10;
}

Podemos ver que el div de color rojo, se coloca por encima del div verde, puesto que el z-index del div rojo es superior al del div verde.