Resumen
La propiedad CSS z-index indica el orden de un elemento posicionado y sus descendientes. Cuando varios elementos se superponen, los elementos con mayor valor z-index cubren aquellos con menor valor.
Para una caja posicionada (es decir, una con cualquier position aparte de static), la propiedad z-index especifica:
- El nivel de apilamiento en el actual contexto de apilado.
- Si la caja establece un contexto de apilamiento local.
| Valor inicial | auto |
|---|---|
| Applies to | positioned elements |
| Heredable | no |
| Media | visual |
| Valor calculado | como se especifica |
| Animation type | 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
left:20em; top:-25px; opacity:0.9
Especificaciones
| Specification | Status | Comment |
|---|---|---|
| CSS Transitions La definición de 'visibility' en esta especificación. |
Working Draft | Define visibility como animable. |
| CSS Level 2 (Revision 1) La definición de 'z-index' en esta especificación. |
Recommendation | Especificación inicial. |
Compatibilidad con navegadores
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
| Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Soporte básico | 1.0 | 1.0 (1.7 o anterior) | 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