¿Cómo funciona la propiedad “z-index” en CSS?

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 como relative, 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:

1. El nivel de apilamiento del contenedor en el contexto de apilamiento actual.
2. 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):

1. Contenedores en el flujo normal, de acuerdo con la secuencia establecida en el código fuente.
2. Contenedores flotantes (que usan float).
3. 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.

Haz clic aquí para probar esta herramienta.

Con esto sólo no me alcanza. ¿Dónde puedo encontrar más información?

Para las mentes inquietas, lo mejor es recurrir a algunas fuentes en inglés:

• Elaborate description of Stacking Contexts
• z-index Attribute, zIndex Property
• Understanding CSS z-index
• IE/Win problems with absolute positioning inside a relative element
• Overlapping and z-index

¡Espero que esto te haya sacado muchas dudas! ¡No dudes en dejar un comentario si te ha quedado alguna!

Fuente: TJK Design