Muitas vezes, ao construir um rodapé em páginas web usando DIVs e CSS, ele não fica extamente na parte inferior da página, especialmente se o conteúdo acima dele não chega a preencher toda a tela. Sendo assim, como posicionar o rodapé como rodapé mesmo? Algumas pessoas o fazem com Javascript, mas, particularmente, prefiro este modo em CSS mesmo.

Em sua DIV do rodapé, insira as seguintes propriedades:

#rodape{
position: relative;
left: 0;
bottom: 0;
}

Aqui, eu posicionei o rodapé como relativo, sendo que, à esquerda e abaixo dele, tenho 0 pixels. Isto faz com que a DIV do rodapé “grude” na parte inferior da tela. Note que, se você substituir relative por absolute, seu rodapé ficará fixo no ponto 0,0 da tela, mas quando você rolar a página (se seu conteúdo for extenso verticalmente), perceberá que o rodapé permanece no mesmo lugar e sobrepõe seus demais conteúdos.

Isso acontece devido à diferença entre posicionamento absoluto e relativo:

No posicionamento absoluto, o elemento é “desgrudado” da tela, ou seja, o posicionamento absoluto cria um elemento independente – um agente livre – separado do restante do documento. Por isso, se seu rodapé for configurado com esta propriedade, ele irá sobrepor qualquer conteúdo que ultrapasse as coordenadas 0,0 em que ele está posicionado, pois ele ficará “congelado” nesta posição.

No posicionamento relativo, o elemento aparecerá após tudo que estiver antes dele na HTML e antes de tudo que está após ele na HTML, isto é, ele vai obedecer a ordem normal de elementos definidos no código HTML, por isso, seu rodapé configurado com esta propriedade, aparece depois de todo o seu conteúdo e não o sobrepõe.

Até a próxima dica!