Propriedade z-index do CSS

Definição e uso

A propriedade zIndex define a ordem de empilhamento do elemento. O elemento com ordem de empilhamento maior sempre ficará à frente do elemento com ordem de empilhamento menor.

Notas:O elemento pode ter valor negativo para a propriedade z-index.

Notas:O Z-index só funciona em elementos alinhados (por exemplo, position:absolute;)

Explicação

Essa propriedade define a posição do elemento alinhado ao longo do eixo z, onde o eixo z é definido como o eixo vertical que se estende até a área de exibição. Se for um número positivo, está mais perto do usuário, se for negativo, está mais longe do usuário.

Veja também:

Tutorial CSS:Posicionamento CSS

Manual de referência do HTML DOM:Propriedade zIndex

Exemplo

Definir o z-index da imagem:

img
  {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  }

Experimente você mesmo

Sintaxe do CSS

z-index: auto|number|initial|inherit;

Valor da propriedade

Valor Descrição
auto Padrão. A ordem de empilhamento é igual à do elemento pai.
number Define a ordem de empilhamento do elemento.
inherit Deve-se herdar o valor da propriedade z-index do elemento pai.

Detalhes técnicos

Valor padrão: auto
Herança: não
Versão: CSS2
Sintaxe do JavaScript: object.style.zIndex="1"

Mais exemplos

Z-index
O Z-index pode ser usado para posicionar um elemento após outro.
Z-index
O elemento no exemplo anterior mudou o Z-index.

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 3.0 1.0 4.0