Um dos desafios ao usar o posicionamento de CSS para o layout de página da Web é que alguns dos seus elementos podem se sobrepor a outros. Isso funciona bem se você quiser que o último elemento no HTML esteja no topo, mas e se você não fizer isso ou se quiser ter elementos que atualmente não se sobrepõem a outros para fazer isso, porque o design exige essa aparência "em camadas" ? Para alterar a maneira como os elementos se sobrepõem, você precisa usar a propriedade CSS.
Se você usou ferramentas gráficas no Word e no PowerPoint ou um editor de imagens mais robusto, como o Adobe Photoshop, é bem provável que você tenha visto algo como o z-index em ação. Nesses programas, você pode destacar o (s) objeto (s) que você desenhou e escolher uma opção para "Enviar para trás" ou "Trazer para a frente" determinados elementos do documento. No Photoshop, você não tem essas funções, mas tem o painel "Camada" do programa e pode organizar onde um elemento cai na tela, reorganizando essas camadas. Em ambos os exemplos, você está essencialmente definindo o índice z desses objetos.
O que é o índice Z?
Quando você usa o posicionamento de CSS para posicionar elementos na página, precisa pensar em três dimensões. Existem as duas dimensões padrão: esquerda / direita e superior / inferior. O índice da esquerda para a direita é conhecido como o índice x, enquanto o da parte superior para a inferior é o índice y. É assim que você posicionaria os elementos horizontalmente ou verticalmente, usando esses dois índices.
Quando se trata de web design, há também a ordem de empilhamento da página. Cada elemento na página pode ser colocado acima ou abaixo de qualquer outro elemento. A propriedade z-index determina onde na pilha cada elemento está. Se x-index e y-index são as linhas horizontais e verticais, então z-index é a profundidade da página, essencialmente a terceira dimensão.
Pense nos elementos de uma página da web como pedaços de papel e na própria página da Web como uma colagem. Onde você coloca o papel é determinado pelo posicionamento, e quanto dele é coberto pelos outros elementos é o z-index.
- O índice z é um número, seja positivo (por exemplo, 100) ou negativo (por exemplo, -100).
- O índice z padrão é 0.
O elemento com o maior z-index está no topo, seguido pelo próximo maior e assim por diante até o menor z-index. Se dois elementos tiverem o mesmo valor de índice z (ou não estiver definido, significando o uso do valor padrão 0), o navegador os colocará na ordem em que aparecem no HTML.
Como usar o Z-Index
Dê a cada elemento que você deseja na sua pilha um valor de índice z diferente. Por exemplo, se você tiver cinco elementos diferentes:
- elemento A - z-index de -25
- elemento B - índice z de 82
- elemento C - z-index não definido
- elemento D - índice z de 10
- elemento E - z-index de -3
Eles serão empilhados na seguinte ordem:
- elemento B
- elemento D
- elemento C
- elemento E
- elemento A
É recomendado usar valores de índice z muito diferentes para empilhar seus elementos. Dessa forma, se você adicionar mais elementos à página posteriormente, terá espaço para colocá-los em camadas sem precisar ajustar os valores do índice z de todos os outros elementos. Por exemplo:
- 100 para o seu elemento mais alto
- 0 para o seu elemento do meio
- -100 para o seu elemento inferior
Você também pode fornecer dois elementos com o mesmo valor de índice z. Se esses elementos estiverem empilhados, eles serão exibidos na ordem em que estão escritos no HTML, com o último elemento na parte superior.
Uma nota: para um elemento usar efetivamente a propriedade z-index, ele deve ser um elemento de nível de bloco ou usar uma exibição de "block" ou "inline-block" em seu arquivo CSS.
