Saindo de uma visão 2D do HTML e entendendo profundidade: Aprenda a propriedade Z-index no CSS.

A princípio quando olhamos para uma página HTML percebemos que é um ambiente 2D, em que podemos entender que as coisas possuem simplesmente largura e altura. 

Mas nas últimas aulas vimos que os elementos podem ficam um sobre o outro, dessa forma criando uma pilha de elementos sobrepostos, criando assim uma dimensão nova para nós, a profundidade.

Levando em conta que a dimensão de largura é entendida como um eixo chamado X, e a altura Y, quando falamos de profundidade estamos tratamos como o eixo Z.

Usar position

Obrigatoriamente para usar z-index os elementos devem estar posicionados, ou seja, devem possuir algum valor de “position” diferente de static.

Então se tivermos por exemplo um elemento pai, e dentro dele 2 outros elementos que um está sobrepondo o outro, podemos escolher qual deve ficar por cima da seguinte forma:

Nesse exemplo devido ao float em um dos elementos, um ficou sobre o outro visivelmente, então para dizer que o “filho2” deve ficar à frente do “filho1” primeiramente posicionamos todos os elementos, e damos um valor de z-index maior para o “filho2”.

Para determinar qual elemento deve sobrepor o outro devemos atribuir um valor maior de z-index para ele. Nesse caso informei que o z-index do “filho1” foi 1, e o z-index do “filho2” foi 2, sendo 2 maior que 1, o navegador mostra à frente o de maior valor de z-index (#filho2).

Essa aula no qual aprendemos z-index no CSS, fecha os conteúdos focados em propriedades do CSS. A próximas 3 aulas serão para treinarmos várias propriedades juntas para personalizar uma tabela, um formulário e uma lista.