Nesta semana vou passar uma dica sobre o uso da propriedade z-index,
do CSS. Para quem não lembra, com o z-index podemos especificar a ordem
em que os nossos elementos aparecem nas diversas “camadas” que compõe
nossa página HTML. Ou em outras palavras, podemos definir a profundidade
de exibição dos elementos. Para relembrar, vamos começar com um
exemplo:
Temos duas divs, uma por cima da outra com position:absolute. Segue o código:
Perceba que a amarela fica em baixo da vermelha, porque a vermelha
foi adicionada por último no nosso HTML. Este é o z-index padrão dos
elementos, ou seja, eles recebem a ordem que está posicionados no seu
HTML, os primeiros elementos aparecem por baixo, e os últimos por cima.
Caso desejemos alterar essa ordem sem mexer no HTML, precisamos usar
então o z-index dos elementos.
Para colocar a amarela por cima da vermelha, então o z-index da
amarela dela precisa ser qualquer valor maior que o z-index da vermelha.
Vamos colocar 1 para a vermelha e 2 para amarela e vamos ver o
resultado:
Com o z-index temos muita flexibilidade para alteramos as camadas de
todos os seus elementos no HTML, porém deve ser usado com cuidado! Já vi
muita gente distribuíndo z-index em todo lugar no CSS e depois começar a
se perder e não saber porque algo de errado estava ocorrendo. Deve ser
usando com moderação.
Atenção com a hierarquia dos elementos!
O que fizemos com z-index no nosso código acima para
alterar a ordem das camadas não funcionaria se estivéssemos usando
hierarquia nos nossos elementos, ou seja, um dentro do outro. Se por
exemplo o nosso box2 (vermelho), estivesse dentro do box1 (amarelo),
como no código abaixo, o z-index não funcionaria.
Isso porque os elementos internos sempre ficarão por cima dos elementos externos, mesmo que você defina algum z-index para ele. O z-index só funciona com elementos de mesmo nível.
!!!!!!!! Outra observação importante é que o z-index só funciona com elementos posicionados (position:absolute, position:relative ou position:fixed)
Neste site você consegue brincar um pouco com o z-index e ver exatamente como ele se comporta em diversos casos e situações
0 comentários:
Postar um comentário