O que é a propriedade Z-Index em CSS?

As folhas de estilo em cascata (CSS) fornecem uma gama enorme de propriedades que especificam como os elementos html aparecerão nas páginas da web, por exemplo, a propriedade de exibição define o comportamento de exibição dos elementos, a propriedade de posicionamento especifica a posição dos elementos, a propriedade em segundo plano fornece um plano de fundo em segundo plano cor para elementos, e a lista continua. Este artigo foi especialmente projetado para enfatizar a importância da propriedade Z-Index no CSS.

No HTML, os elementos têm uma certa ordem de empilhamento que especifica o arranjo em que os elementos são posicionados. A regra definida para o posicionamento do elemento é que o elemento que possui uma ordem de empilhamento mais alto está posicionado na frente do elemento com menor ordem de empilhamento. Uma ordem de pilha de um elemento pode exibir valores positivos e negativos.

O que é a propriedade Z-Index em CSS

A propriedade Z-Index define a ordem de pilha dos elementos HTML de uma maneira que especifica qual elemento será exibido na frente e qual elemento é exibido no fundo.

Sintaxe

Z-Index: Valor;

A propriedade Z-Index pode exibir certas propriedades que são explicadas em detalhes abaixo.

Valor	Descrição
auto	Este valor define a ordem de pilha dos elementos iguais aos de seus elementos pais.
número	Este valor é usado para dar uma ordem de pilha manualmente a um elemento. A ordem da pilha pode exibir valores positivos e negativos.
inicial	Este valor define a ordem de pilha de um elemento para seu valor padrão.
herdar	Este valor define a ordem de pilha de um elemento de acordo com as propriedades que o elemento herdado de seu elemento pai.

Aqui ilustramos a propriedade Z-Index com a ajuda de alguns exemplos.

Exemplo 1

Suponha que você queira fornecer uma imagem de fundo em seu site e deseja que seus outros elementos sejam exibidos na frente dessa imagem. Use o seguinte snippet de código.

Html

A caminhada matinal é benéfica para a saúde

No exemplo acima, existem dois elementos um é um

elemento e o outro é um elemento.

CSS

H2
Posição: relativa;
Esquerda: 200px;
Top: 0px;

img
Z -Index: -1;
Posição: Absoluto;
Esquerda: 200px;
Top: 0px;

O elemento está posicionado no fundo do

elemento porque a propriedade Z -Index atribuída ao elemento é -1. Além disso, o

O elemento é relativamente posicionado de 200px da esquerda e 0px de cima, enquanto o elemento tem uma posição absoluta, o que significa que será colocado 200px da esquerda e 0px do topo, com relação à posição de seu elemento ancestral .

Saída

Aqui está uma saída do exemplo acima.

Ambos os elementos empilhados com sucesso.

Agora, se removermos o valor do índice z do elemento, será colocado na frente do

elemento porque é definido por último no fluxo de documentos.

img
/*Z -Index: -1;*/
Posição: Absoluto;
Esquerda: 200px;
Top: 0px;

Saída

Agora o

O elemento é colocado atrás do elemento.

Exemplo 2

Neste exemplo, demonstramos o uso de valor positivo do índice z, além disso, neste exemplo, ilustramos como colocar um elemento atrás de um determinado elemento. Aqui dois elementos estão sendo criados.

Html

Div 1
Div 2

A primeira div tem uma posição relativa, o que significa que ela será posicionada 20px da esquerda e 10px do topo em relação à sua posição original, além disso, atribuímos um valor de índice z de 1.

.div1
Z-Index: 1;
Posição: relativa;
Esquerda: 20px;
topo: 10px;
borda: 3px cinza sólido;
Altura: 100px;
Largura: 300px;

Para o segundo div, atribuímos uma posição absoluta, o que significa que ela será colocada 100px da esquerda e 60 px do topo em relação à posição de seu elemento pai.

.div2
Posição: Absoluto;
Esquerda: 100px;
topo: 60px;
Background-Color: Indianred;
Altura: 80px;
Largura: 200px;

Saída

Div 2 empilhado com sucesso atrás de div 1.

Pontos para lembrar!

1. Você precisa definir a posição dos elementos ou então a propriedade Z-Index não funcionará. (Os elementos podem ter posições absolutas, relativas, fixas ou pegajosas).

2. Sem especificar a propriedade Z-Index, se dois elementos se destacam, o elemento definido por último no fluxo de documentos está posicionado na frente do outro elemento.

Conclusão

A propriedade Z-Index é usada para definir a ordem de empilhamento dos elementos HTML, o que significa que especifica o arranjo dos elementos que estão sendo exibidos na página da web. A propriedade Z-Index exibe quatro valores que são; Automático que define a ordem da pilha de elementos iguais aos de seus elementos pais, o número é usado para dar uma ordem de pilha manualmente a um elemento, define a ordem de pilha de um elemento ao seu valor padrão e herde a ordem de pilha de um elemento de acordo com as propriedades que o elemento herdou de seu elemento pai. Este post discute a propriedade Z-Index em profundidade com a ajuda de exemplos adequados.