As propriedades de posicionamentos são armas importantes e eficazes que os desenvolvedores web tem em mãos para ampliar as possibilidades de um layout com dicas e CSS.
Técnicas simples de posicionamento muitas vezes são a solução mais adequada para posicionar elementos dentro do layout, apesar disso, muitos são os webdesigners que resistem à utilização dessas técnicas ou usam timidamente.
Talvez a razão disso seja pelo simples fato de que o posicionamento não é uma matéria de fácil compreensão.
A começar pelo próprio nome. A rotulação dessas duas propriedades passa uma falsa ideia de que ao utilizar o posicionamento absoluto, o elemento não será posicionado a partir de um ponto de referência, ao contrário do que ocorrerá se utilizarmos o posicionamento relativo.
Esse é um equívoco comum. Convenhamos, quando você quer alterar o posicionamento de qualquer coisa, você precisa de um ponto de referência. Isso quer dizer que, tanto elementos com posicionamento absoluto quanto relativo estão posicionados em relação a alguma coisa. A diferença está exatamente no ponto de referência.
Em linhas gerais, um elemento cuja propriedade “position” é “absolute”, se posicionará em relação ao seu primeiro elemento ancestral cuja propriedade “position” não seja estática. Já um elemento cuja propriedade “position” é “relative” se posicionará em relação à sua posição normal.
No exemplo abaixo temos uma div envolvendo outras duas, ou seja, uma div pai e duas filhas de mesmo nível.
<div id=”wrap”>
<div id=”div1″>Div 1</div>
<div id=”div2″>Div 2</div>
</div>
As divs não possuem qualquer declaração de posicionamento e, sendo assim, aparecem na ordem normal de um documento HTML, conforme mostra a figura:
Veja o que acontece quando declaramos a propriedade “position: absolute” para a div 2:
Note que a div 2 saiu completamente da div container. Veja o que ocorre quando a mesma div é declarada com a propriedade “position:relative”:
Com exemplos acima fica claro que a referência dos dois tipos de posicionamento são distintas. Enquanto o posicionamento absoluto, ao se deslocar, abandona completamente sua referência anterior de posição dentro da div container, o posicionamento relativo mantém a mesma referência em seus deslocamentos.
Vamos tornar o exemplo ainda mais claro, posicionando as duas divs, a primeira com posicionamento absoluto e a segunda com posicionamento relativo. Porém, dessa vez, vamos introduzir a propriedade “left:200px” em ambas, lembrando que se você não definir nenhuma coordenada (left, right, top e botton), o elemento permanecerá na exata posição em que se encontra. Veja como ficou:
Note que a div 1, posicionada absolutamente, está a 200px da margem esquerda da tela do navegador, enquanto a div 2 está posicionada a 200px em relação à sua posição inicial dentro do elemento container. Isso quer dizer que, nesse caso, a tela do navegador influencia diretamente no posicionamento da div 1, ou seja, quanto maior a resolução da tela, mais distante da div 2 ela se encontrará. De maneira análoga, em uma resolução pequena, a div 1 se aproximaria da div 2.
Muito cuidado com as conclusões precipitadas. No início deste post definimos que elementos com “position: absolute;” se posicionam em relação a qualquer elemento ancestral que também possua algum tipo de posicionamento que não seja estático. Sendo assim, a div 1 se posiciona em relação ao navegador porque o elemento container não possui a propriedade “position” definida e diferente de “static”. Ou seja, quando não há no documento, nenhum elemento pai que possua um posicionamento definido e diferente de “static”, o elemento cuja propriedade “position” é definida como “absolute” se posicionará em relação ao navegador. Veremos isso mais detalhadamente no próximo post.
Quero demonstrar ainda uma diferença que considero fundamental e pode fazer a diferença nos seus layouts. O modo como uma div absoluta se desloca no documento em relação ao modo como uma div relativa se desloca.
Vimos acima que um elemento absoluto sai completamente de sua referência e se desloca inteiramente. Já o posicionamento relativo não se desloca inteiramente, ou seja, ele desloca o elemento, mas continua ocupando o mesmo espaço que ocupava antes no layout. Veja o exemplo:
Nota-se que, ao deslocarmos a div 2 cem pixels para cima ela ainda continuou ocupando a posição original em que se encontrava, distância marcada na imagem como deslocamento.
No próximo post iremos ver alguns exemplos práticos da utilização das propriedade “absolute” e “relative” conjuntas como recurso para resolver problemas em layouts.
Aproveite os comentários abaixo para deixar suas dúvidas e sugestões, participe!
