Por que o Z-Index não funciona

O CSS “Z-Index”Determina a ordem de empilhamento do elemento HTML. À medida que seu valor aumenta, ele será colocado à frente de outros elementos. Por padrão, todos os elementos na página da web têm uma posição definida estaticamente. No entanto, o "Z-Index" funciona apenas nos elementos posicionados.

Este artigo o guiará através da possível solução para o Index Z não está funcionando com o problema:

• Definindo a posição do elemento.
• Elementos com o mesmo valor de índice z em ordem em ordem de aparência.
• Definindo o nível de empilhamento do elemento filho em relação ao seu pai.

Pré -requisito: Crie uma página HTML

No HTML, faça quatro “" containers. Primeiro, adicione uma tag "" e atribua a classe "Main-1”Para isso. Dentro disso, adicione três crianças “” elementos tendo aulas “Sub-Main-1","Sub-Main-2", e "Sub-Main-3”:

pai
1
2
3

No CSS, estilize os elementos "" para mudar suas formas.

Classe de estilo “Main-1”

.Main-1
Largura: 150px;
Altura: 150px;
Background-Color: Bisque;
margem: 50px automático;
Posição: relativa;

Aqui:

• ““largura”Determina a amplitude do elemento.
• ““altura”Define a altura do elemento.
• ““cor de fundo”Aplica a cor de fundo do elemento.
• ““margem”Adiciona espaço ao redor do elemento.
• ““posição"Com o valor"relativo”Coloca o elemento em relação à sua posição atual.

Classe de estilo “Sub-Main-1”

O "Sub-Main-1”A classe é estilizada com as seguintes propriedades para fazer uma caixa 1:

.Sub-Main-1
Largura: 150px;
Altura: 150px;
Background-Color: CadetBlue;
Posição: Absoluto;
TOP: 30px;
Esquerda: 20px;

Aqui:

• ““posição"Com o valor"absoluto”Posiciona o elemento de acordo com o elemento posicionado de seus pais.
• ““principal" e "esquerda”São utilizados para adicionar espaço no topo do elemento e à esquerda.

Estilo "sub-main-2" classe

Para a caixa 2, os seguintes estilos são aplicados:

.Sub-Main-2
Largura: 150px;
Altura: 150px;
Background-Color: RGB (223, 134, 186);
Posição: Absoluto;
topo: 60px;
Esquerda: 50px;

Classe de estilo “Sub-Main-3”

As seguintes propriedades CSS são aplicadas para criar a caixa 3:

.Sub-Main-3
Largura: 150px;
Altura: 150px;
Background-Color: RGB (210, 243, 186);
Posição: Absoluto;
Top: 90px;
Esquerda: 80px;

As quatro caixas foram criadas com sucesso e estão em ordem de empilhamento natural:

Definindo a posição do elemento

O importante a considerar é que o “Z-Index”A propriedade funciona apenas com elementos posicionados. Adicione a propriedade "Z-Index" com qualquer valor, como "1”. Então, se removermos o “posição”Propriedade da“Sub-Main-2”Classe, a“Z-Index”A propriedade não funcionará:

Elementos com o mesmo valor de índice z em ordem em ordem de aparência

Se todos os elementos forem ajustados com o mesmo “Z-Index”Valor, todos eles serão empilhados em sua ordem de aparência. Portanto, aumente o valor da propriedade "Z-Index" do elemento que você deseja exibir na frente de todos.

Vamos implementá -lo com a ajuda de um exemplo:

Pai 1
Criança 1
Criança 2

No CSS, atribua cada classe à propriedade "Z-Index" com o valor "1". A página da web ficará assim:

Definindo o nível de empilhamento do elemento filho em relação ao seu pai

Os filhos do elemento pai pilha em relação ao seu elemento pai. Eles não afetarão a ordem de empilhamento do outro elemento de irmão.

Para um bom entendimento, analise o exemplo abaixo.

Crie um arquivo HTML

• Primeiro, adicione um “”Elemento para o pai 1 e atribui -lhe uma classe“Main-1”.
• Dentro disso, adicione "" elementos para seus filhos filhos 1, criança 2 e camada modal.
• No final, adicione um elemento "" para o pai 2:

Pai 1
Criança 1
Criança 2


Pai 2

Colocou o "Main-1" aula "Z-Index”Valor como“2”:

Z-Index: 2;

Classe de estilo “Child-Modal”

.criança-modal
Posição: fixado;
Top: 0px;
Esquerda: 0px;
largura: 100%;
Altura: 100VH;
Index z: 100;
Background-Color: RGBA (0, 0, 0, 0.295);

O "criança-modal"Class da aula"Z-Index”O valor é definido como“100”, O que significa que deve estar na frente de seus elementos irmãos.

Colocou o "Z-Index”Valor do“Sub-Main-2" aula "5”:

Index z: 5;

Colocou o "Z-Index”Valor do“Main-2" aula "3”:

Z-Index: 3;

Podemos observar a partir da imagem abaixo que o irmão “Main-2"Do elemento pai está na frente do"Main-1”Pai, embora um dos elementos da criança tenha um maior“Z-Index" valor. Isso ocorre porque a classe “Main-1” pai tem o valor da propriedade “Z-Index” “2” e o “Main-2” tem um valor “Z-Index” “3”:

Essas são as razões pelas quais o Z-Index não funciona.

Conclusão

O "Z-Index”A propriedade funciona nos elementos posicionados, como os elementos que tenham“posição" propriedade "absoluto","fixo", ou mais. Se o valor "Z-Index" do elemento pai for menor que seu elemento irmão, e o filho do antigo elemento pai tem um maior valor "Z-Index", o elemento pai do irmão será exibido na frente de todos. Este artigo discutiu a propriedade "Z-Index" e por que não funciona.