z-index
Establece el orden de apilamiento de los objetos posicionados.
Sintaxis
{ z-index: vOrder}
Valores posibles
vOrder
Variante que especifica o recibe uno de los valores siguientes:
auto |
Valor predeterminado. Cadena que especifica el orden de apilamiento de los objetos posicionados según el orden en que aparecen los objetos en el código fuente HTML. |
orden |
Entero que especifica la posición del objeto en el orden de apilamiento. |
La propiedad tiene el valor predeterminado auto. No se hereda.
Observaciones
Los objetos con un valor z-index positivo se posicionan arriba de los que tienen un valor z-index negativo (o un valor inferior). Si dos objetos tienen el mismo valor z-index, se apilan según el orden del código fuente. Un valor positivo posicionará el elemento encima del texto sin ningún valor z-index definido, mientras que un valor negativo lo colocará debajo. Establezca este parámetro en null para quitar la propiedad.
La propiedad z-index solo se aplica a objetos que tienen establecida la propiedad position en relative o absolute.
No se aplica a controles en ventana, como objetos select.
Una entrada con un dispositivo señalador, como un mouse, no se inserta en los elementos superpuestos aunque los elementos estén como no visibles. Esto también es válido para los elementos posicionados con un valor z-index negativo, excepto si:
El elemento primario es un contenedor de desplazamiento (es decir, la propiedad overflow está establecida en auto o scroll).
El elemento primario está posicionado (es decir, la propiedad position está establecida en absolute, relative o fixed).
Ejemplos
En el siguiente ejemplo se usa la propiedad z-index para cambiar el orden de apilamiento de los objetos. Se utiliza una hoja de estilos en línea para establecer el orden de apilamiento:
<img src="cone.jpg" style="position:absolute;
top:100px; left:100px; z-index:4"/>
<div style="position:absolute; top:100; left:100;
color:red; background-color:beige; font-weight:bold;
z-index:1">
. . . </div>
Información sobre estándares
Esta propiedad se define en la especificación Cascading Style Sheets (CSS), Level 2 (CSS2) (Hojas de estilos en cascada (CSS), nivel 2 (CSS2)).
Aplicable a
A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, CUSTOM, DD, DEFAULTS, DFN, DIV, DL, DT, EM, FIELDSET, FORM, I, IFRAME, INPUT TYPE=BUTTON, INPUT TYPE=CHECKBOX, INPUT TYPE=FILE, INPUT TYPE=IMAGE, INPUT TYPE=PASSWORD, INPUT TYPE=RADIO, INPUT TYPE=RESET, INPUT TYPE=SUBMIT, INPUT TYPE=TEXT, LI, OL, P, S, SPAN, SUB, TABLE, TBODY, TD, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP