z-index

Resumen

La propiedad CSS z-index indica el z-order de un elemento y sus descendientes. Cuando varios elementos se superponen, z-order determina cuales cubren a otros. Un elemento con mayor z-index generalmente cubre a otro menor.

Para una caja posicionada, la propiedad z-index indica:

El nivel de apilamiento en el actual contexto de apilado.
Si la caja establece un contexto de apilamiento.

Valor inicial	`auto`
Applies to	positioned elements
Heredable	no
Media	visual
Valor calculado	como se especifica
Animatable	yes, as an integer
Canonical order	el orden único no-ambigüo definido por la gramática formal
Creates stacking context	yes

Syntax

z-index:  auto | <entero> | inherit

Values

auto: La caja no establece un nuevo contexto de apilamiento. El nivel de apilamiento de la caja generada es el mismo que el de la caja padre.
<integer>: Este entero es el nivel de apilamiento de la caja generada en el actual contexto de apilamiento. La caja además establece un contexto de apilamiento en el que el nivel de apilamiento es 0. Esto significa que los z-index de los elementos descendientes no son comparados con los elementos que están fuera de este elemento.

Ejemplos

position:relative; z-index:1; position:absolute; z-index:2; left:60px; top:3em; position:absolute; z-index:3;
left:20em; top:-25px; opacity:0.9

Especificaciones

Specification	Status	Comment
CSS Transitions The definition of 'visibility' in that specification.	Working Draft	Define `visibility` como animable.
CSS Level 2 (Revision 1) The definition of 'z-index' in that specification.	Recommendation	Especificación inicial.

Característica	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Soporte básico	1.0	1.0 (1.7 or earlier)	4.0	4.0	1.0
Valores negativos (CSS2.1, no soportado en la antigua especificación CSS2)	1.0	3.0 (1.9)	4.0	4.0	1.0

Característica	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Soporte básico	?	?	?	?	?

Ver también

Propiedad CSS position
Entendiendo la propiedad CSS z-index