Propiedad CSS z-index
Ejemplo
Establezca el índice z para una imagen:
img
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Definición y uso
La z-index
propiedad especifica el orden de pila de un elemento.
Un elemento con mayor orden de apilamiento siempre está delante de un elemento con menor orden de apilamiento.
Nota: z-index
solo funciona en elementos posicionados (posición: absoluta, posición: relativa, posición: fija o posición: fija) y elementos flexibles (elementos que son hijos directos de
elementos display:flex ).
Nota: Si dos elementos colocados se superponen sin z-index
especificar, el último elemento colocado en el código HTML se mostrará en la parte superior.
Valor por defecto: | auto |
---|---|
Heredado: | No |
Animable: | si. Leer sobre animable |
Versión: | CSS2 |
Sintaxis de JavaScript: | objeto .style.zIndex="-1" |
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Property | |||||
---|---|---|---|---|---|
z-index | 1.0 | 4.0 | 3.0 | 1.0 | 4.0 |
Sintaxis CSS
z-index: auto|number|initial|inherit;
Valores de propiedad
Value | Description | Play it |
---|---|---|
auto | Sets the stack order equal to its parents. This is default | |
number | Sets the stack order of the element. Negative numbers are allowed | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
páginas relacionadas
Tutorial CSS: Posicionamiento CSS
Referencia HTML DOM:
propiedad zIndex