Propriedade zIndex do estilo

Definição e uso

zIndex Define ou retorna a ordem de empilhamento do elemento definido pela posição.

O elemento com a ordem de empilhamento maior (1) está sempre à frente do elemento com a ordem de empilhamento menor (0).

Dica:O elemento que define a posição é Propriedade position Definido como:relative,absolute ou fixed do elemento.

Dica:Essa propriedade é útil para criar elementos sobrepostos.

Veja também:

Tutorial de CSS:Propriedade z-index do CSS

Manual de referência do CSS:Propriedade zIndex

Exemplo

Exemplo 1

Mudar a ordem de empilhamento do elemento <img>:

document.getElementById("img1").style.zIndex = "1";

Experimente você mesmo

Exemplo 2

Mudar o valor da propriedade z-index do elemento <div>:

document.getElementById("myDIV").style.zIndex = "-1";

Experimente você mesmo

Exemplo 3

Retorna o valor da propriedade z-index do elemento <img>:

alert(document.getElementById("img1").style.zIndex);

Experimente você mesmo

Sintaxe

Retornar a propriedade zIndex:

object.style.zIndex

Definir a propriedade zIndex:

object.style.zIndex = "auto|number|initial|inherit"

Valor da propriedade

Valor Descrição
auto O navegador determina a ordem de empilhamento do elemento (baseado na sua ordem no documento). Padrão.
number Inteiro que define a ordem de empilhamento do elemento. Permite valores negativos.
initial Defina essa propriedade como seu valor padrão. Veja initial.
inherit Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão: auto
Retorno: Cadeia de caracteres, que representa a ordem de empilhamento do elemento.
Versão do CSS: CSS2

CSS2

Suporte a navegadores Chrome Edge Firefox Safari
Suporte a navegadores Chrome Edge Firefox Safari
Opera Opera Opera Opera Opera