Qua

03

Dez

2008

15:14

Durante um bom tempo levei o maior baile até conseguir descobrir a lógica por trás da posição relativa e da posição absoluta de elementos de uma página HTML. Neste tutorial vou passar para vocês as minhas "descobertas".

Posição Absoluta - Quem manda é o pai

Inicialmente é preciso ficar claro o que é uma posição absoluta. Quando um elemento recebe este atributo, ele é tirado do seu lugar normal dentro do documento e colocado exatamente onde foi determinado. Observe como os quadrados (que são elementos div de 30x30 pixels) são posicionados de acordo com as especificações de posição absoluta.

O quadrado vermelho está 10 pixels acima da borda inferior (bottom) e a 10 pixels da borda direita (right).

O quadrado azul está 10 pixels distante do topo (top) e 10 pixels distante da borda esquerda (left).

O CSS é o seguinte:

#quadradoVermelho {
   position: absolute;
   bottom: 10px;
   right: 10px;
}
 
#quadradoAzul {
   position: absolute;
   top: 10px;
   left: 10px;
}

O mais importante aqui é entender que

O local especificado para elementos com posição absoluta é em relação ao seu elemento pai mais próximo que esteja em posição relativa!

Acompanhe. Criei um elemento div de cor amarela que está em posição relativa. Este div contém o div vermelho e o div azul, ambos de posição absoluta. O quadrado amarelo é o pai dos outros dois quadrados e vai servir de referência para o posicionamento dos filhos. Como indicamos para o quadrado vermelho 10 pixels para bottom e right, o quadrado vermelho é distanciado da borda inferior e da borda direita em 10 pixels. O mesmo raciocício vale para o quadrado azul.

Posição Relativa - Quem manda é o elemento

Se trocarmos apenas a posição absoluta dos quadrados vermelho e azul por uma posição relativa, a coisa muda completamente de figura. Olha só a confusão!

O quadrado vermelho está 10 pixels acima da borda superior e 10 pixels antes da borda esquerda. Vamos tentar entender o que foi que aconteceu. Se não tivéssemos alterado as propriedades bottom e right, a localização do quadrado seria a natural, ou seja, a próxima posição disponível dentro do elemento pai (observe a área de teste à direita).

Como mandamos o quadrado vermelho se deslocar 10 pixels à partir de baixo (bottom), ele se deslocou de baixo para cima. Da mesma forma, como pedimos que se deslocasse 10 pixels à partir da direita (right), ele se movimentou da direita para a esquerda. Deu para entender? Tomara que sim, porque eu, até hoje, continuo dando umas tropeçadas

O mesmo vale para o quadrado azul. Se sua posição for relativa, ele ocupa o próximo local livre, que é logo abaixo do quadrado vermelho. Como os quadradinhos têm 30x30 pixels, seu valor top é 30px e seu valor left é 0px. Cito estas propriedades porque foram exatamente estas que modificamos. Se definimos top como 10px, a nova posição top será 30px + 10px = 40px. Da mesma forma a nova posição left será 0px + 10px = 10px. Olhando bem, é exatamente esta a nova posição do quadrado azul.

UFA! Até que enfim uma luz no fim do túnel, principalmente para aqueles que estão começando a se aventurar no CSS