Propriedade de índice z CSS
Exemplo
Defina o z-index para uma imagem:
img
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Definição e uso
A z-index
propriedade especifica a ordem de pilha de um elemento.
Um elemento com maior ordem de pilha está sempre na frente de um elemento com menor ordem de pilha.
Nota: z-index
só funciona em elementos posicionados (posição: absoluto, posição: relativa, posição: fixo ou posição: fixo) e itens flex (elementos que são filhos diretos de
elementos display:flex ).
Nota: Se dois elementos posicionados se sobrepuserem sem um z-index
especificado, o elemento posicionado por último no código HTML será mostrado na parte superior.
Valor padrão: | auto |
---|---|
Herdado: | não |
Animavel: | sim. Leia sobre animáveis |
Versão: | CSS2 |
Sintaxe JavaScript: | objeto .style.zIndex="-1" |
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
Property | |||||
---|---|---|---|---|---|
z-index | 1.0 | 4.0 | 3.0 | 1.0 | 4.0 |
Sintaxe CSS
z-index: auto|number|initial|inherit;
Valores de propriedade
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: Posicionamento CSS
Referência HTML DOM:
propriedade zIndex