Gerenciando o índice z em seu código - manequins

Quando você usa o posicionamento absoluto, você pode determinar exatamente onde as coisas são colocadas, então é possível que elas se sobreponham. Por padrão, os elementos descritos mais tarde em HTML estão posicionados em cima dos elementos descritos anteriormente.

Profundidade de manipulação em CSS

Você pode usar um atributo CSS especial chamado z-index para alterar esse comportamento padrão. O z -axis refere-se a quão próximo um elemento parece ser para o visualizador. Esta imagem demonstra como isso funciona.

O índice z permite que você altere quais elementos aparecem mais perto do usuário.

O atributo z-index requer um valor numérico. Números mais altos significam que o elemento está mais próximo do usuário (ou em top). Qualquer valor para z-index coloca o elemento mais alto do que os elementos com o padrão z-index padrão. Isso pode ser muito útil quando você possui elementos que deseja aparecer em cima de outros elementos (por exemplo, menus que aparecem temporariamente em cima de outros textos).

Aqui está o código que ilustra o efeito z-index :

zindex. html

#blueBox {

background-color: azul;

largura: 100px;

altura: 100px;

posição: absoluta;

esquerda: 0px;

topo: 0px;

margem: 0px;

z-index: 1;

}

#blackBox {

background-color: black;

largura: 100px;

altura: 100px;

posição: absoluta;

esquerda: 50px;

topo: 50px;

margem: 0px;

}

Trabalhando com o índice z

A única alteração neste código é a adição da propriedade z-index . Quanto maior o valor do índice z, mais próximo que esse objeto parece ser para o usuário.

Aqui estão algumas coisas a ter em mente ao usar z-index :

• Um elemento pode ocultar totalmente outro. Quando você começa a posicionar coisas absolutamente, um elemento pode parecer desaparecer porque está completamente coberto por outro. O atributo z-index é uma boa maneira de verificar esta situação.
• Negative z-index pode ser problemático. O valor para z-index deve ser positivo. Embora os valores negativos sejam suportados, alguns navegadores (notadamente versões mais antigas do Firefox) não as tratam bem e podem fazer com que seu elemento desapareça.
• Pode ser melhor dar a todos os valores um índice z . Se você definir o z-index para alguns elementos e deixar o z-index indefinido para outros, você não tem garantia exatamente o que acontecerá. Em caso de dúvida, apenas dê a cada valor seu próprio z-index , e você saberá exatamente o que deve se sobrepor ao que.
• Não dê dois elementos o mesmo z-index . O ponto do z-index é para definir claramente qual elemento deve aparecer mais próximo. Não vença esta finalidade atribuindo o mesmo valor z-index a dois elementos diferentes na mesma página.