Para los que no son expertos en CSS, muchas veces es un misterio el modo en que funciona la propiedad z-index. Pero lo cierto es que es bastante utilizada y nos permite corregir rápidamente algún detalle o problema de ubicación de los elementos, trabajando en conjunto con la archiconocida float.
Para arrojar un poco de luz sobre el asunto te propongo conocer las funciones básicas de z-index y probar una demo online interactiva donde cada cambio que vas realizando en los valores se muestra automáticamente. ¡Comencemos ya!
Las reglas básicas de z-index:
- Un contenedor está apilado al mismo nivel que su objeto “padre” a menos que esto se modifique mediante la propiedad z-index.
- z-index sólo funciona con objetos que tengan la propiedad position seteada comorelative, fixed o absolute.
- Asignar un valor de opacidad menor que 1 a un elemento posicionado genera implícitamente un contexto de apilamiento, lo que equivale a usar z-index.
Para un contenedor posicionado, la propiedad z-index especifica:
- El nivel de apilamiento del contenedor en el contexto de apilamiento actual.
- Si el contenedor establece un contexto de apilamiento local.
Si no se ha especificado un valor para z-index, los elementos se apilan en el siguiente orden (de más atrás hacia adelante):
- Contenedores en el flujo normal, de acuerdo con la secuencia establecida en el código fuente.
- Contenedores flotantes (que usan float).
- Contenedores posicionados, de acuerdo a la secuencia del código fuente.
Demo online interactiva del funcionamiento de z-index:
Con esta herramienta online puedes testear en tiempo real los cambios que vayas haciendo en cada contenedor, para entender visualmente (de eso se trata CSS) cómo funciona z-index.
