fbpx

Dicas CSS: posicionamento relativo e absoluto (parte 2)

No post anterior, vimos como funcionam as dicas de CSS e quais são as principais diferenças entre os tipos de posicionamento CSS: relativo e absoluto. […]

No post anterior, vimos como funcionam as dicas de CSS e quais são as principais diferenças entre os tipos de posicionamento CSS: relativo e absoluto. Neste post veremos algumas aplicações práticas para auxiliar quem pretende começar a empregar essas propriedades em seus layouts.

O modo mais comum de se centralizar um container em uma página é utilizando a propriedade “margin: 0 auto;”.

Entretanto, é possível centralizar um container utilizando a propriedade “position: relative”,  juntamente com o elemento “lef: 50%”.

Para que o container fique devidamente centralizado é preciso fixar seu tamanho e atribuir uma margem esquerda negativa, pois o deslocamento de 50% para a esquerda, parte do canto esquerdo superior do objeto, e não de seu centro.

Suponhamos que você precise centralizar o conteúdo de uma página e que este conteúdo esteja envolvido em uma div container. Nesse caso, sua declaração CSS deverá ser semelhante à do exemplo abaixo:

Loja virtual sob Medida com agilidade e mensalidade acessível

#container { position: relative; left: 50%; margin-left: -495px; width: 990px; }

A vantagem desse tipo de declaração é que qualquer elemento, contido nesse container, que receba um posicionamento absoluto, se posicionará tomando como referência esse container.

Posicionar uma div absolutamente dentro de uma div posicionada relativamente é um recurso muito poderoso. Isso porque, se você simplesmente declarar uma div com “position: relative” ela não se comportará de maneira diferente, permanecerá no mesmo lugar e ocupando o mesmo espaço que antes de se ter utilizado tal declaração.

Porém, um elemento qualquer dentro dessa div declarado com “position: absolute” se posicionará absolutamente tendo a div relativa como referência.

Aproveite os comentários abaixo para deixar suas dúvidas e sugestões, participe!

1/5 - (1 Voto)

Conteúdos relacionados

Rolar para cima
Rolar para cima