Camadas
CSS usa o espaço tri-dimensional - altura, largura e profundidade e precisamos aprender a colocar os elementos em layers (camadas). Camadas, resumidamente, significam como os elementos se sobrepõem uns aos outros. Layers podem ser usados em muitas situações. Tente, por exemplo, usar z-index para criar efeitos em cabeçalhos no lugar de usar imagens. Por um lado é mais rápido carregar texto na página e por outro, texto é mais amigável aos dispositivos de indexação.
Case
Para que você entenda melhor e trazendo para nosso mundo "joomleiro", imagine que você acabou de inserir um movie clip (flash) dentro do template e o mesmo fica sobrepondo o menu, pegou?
Para resolver isto definimos para cada elemento um número índice (z-index). O comportamento normal será o seguinte: elementos com número índice maior se sobrepõem àqueles com menor número. Veja a imagem abaixo:
Estamos utilizando z-index para definir a hierarquia de posições das camadas e neste caso teríamos no arquivo index, algo parecido com o seguinte:
- div red -> z-index = 4
- div green -> z-index = 3
- div yellow -> z-index = 2
- div blue -> z-index = 1
No caso mostrado, os números índice estão em uma seqüência direta (de 1-4), contudo o mesmo resultado poderia ser obtido com uso de 5 diferentes números, não em seqüência. O que conta é a cronologia dos números (a ordem).
O código css para a ilustração das divs é mostrado a seguir:
#blue {
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}
#yellow {
position: absolute;
left: 115px;
top: 115px;
z-index: 2;
}
#green {
position: absolute;
left: 130px;
top: 130px;
z-index: 3;
}
#red {
position: absolute;
left: 145px;
top: 145px;
z-index: 4;
}
O método é simples, mas as possibilidades são muitas. Você pode colocar imagens sobre textos, texto sobre texto, movie clip (flash) sobre menu, vídeo sobre movie clip (flash), e etc...
