fbpx

Dicas CSS: posicionamento relativo e absoluto (parte 1)

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 […]

✓ Conteúdo criado por humano

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:

Checkup de Loja Virtual
Exemplo 1

Veja o que acontece quando declaramos a propriedade “position: absolute” para a div 2:

Exemplo 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”:

Exemplo 3

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:

Exemplo 4

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:

Exemplo 5

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!

4.5/5 - (2 Votos)
Papo de Loja – Podcast sobre E-commerce

Autor/a

Bertholdo

Equipe de redatores do Blog da Bertholdo, incluindo redatores da Rock Content.

Conteúdos relacionados

Rolar para cima
Rolar para cima