Al poder ubicar los elementos en posiciones precisas de la página, puede ocurrir que dos elementos se superpongan. En los casos en que dos elementos queden superpuestos, podemos determinar el orden en que se "apilarán" a través de la propiedad z-index.
Por lo general, el navegador usa el mismo orden que los elementos tienen en
la página para definir el orden en que son apilados. Este orden dentro
de la pila de elementos puede adjudicarse explícitamente con la propiedad
z-index utilizando un valor entero (cuanto más alto el entero,
más cercano al lector o más arriba en la pila).
Se dice que un elemento establece un contexto de pila al cual pertenecen todos sus descendientes. En cada uno de esos contextos se establece un nuevo nivel de pila para los elementos descendientes. Y aquí lo importante: el contexto de pila (¡no la propiedad z-index!) es heredado y los elementos pertenecientes a distintos contextos no pueden "mezclarse".
Veamos el significado de lo anterior con un ejemplo: si en una página
encontramos dos elementos (A y B), uno con
z-index=5 (A) y el otro con z-index=3
(B), A será procesado al frente de
B. Supongamos ahora que A tiene un descendiente
(C) con z-index=0: el elemento C,
por pertenecer al contexto de pila del elemento ubicado más arriba, también
será procesado por encima de B (aunque B
tenga z-index=3). Todos los elementos descendientes de
A se ubicarán por encima de B (y también
por encima de todos los descendientes de B).
Estas reglas pueden resultar confusas pero son bastante intuitivas, ya que resulta lógica que existiendo dos elementos con distinto orden, todos los descendientes del elemento ubicado más al frente se ubiquen por sobre todos los descendientes del elemento ubicado más atrás. Por supuesto, la misma regla se aplica recursivamente a los descendientes de un mismo elemento (si dentro de C encontramos dos elementos (D y E), uno con..., y así infinitamente).
Cuando más potencia adquiere esta propiedad es al usar algún tipo de rutina javascript. Así es posible conseguir que al realizar una determinada acción (pasar el ratón sobre un área determinada o hacer click en un botón, por ejemplo) se cambien los valores de esta propiedad, con lo que se pueden conseguir efectos muy llamativos.