faceboook

Dicas de CSS: position absolut, relative, static e fixed

Confira de Dicas de CSS, como o posicionamento de elementos como um bloco de pixels e seus quatro valores: absolute, relative, static e fixed.

Autor: Redação Impacta

Para falar de CSS é importante que você entenda primeiro que todo e qualquer elemento em uma página da web é um bloco. Literalmente um retângulo de pixels. Isto é fácil de entender quando você define a propriedade ‘display‘ de um elemento como ‘block‘ ou como ‘inline‘; alterando o “fluxo” da página.

Elementos com a propriedade ‘display: block’ definida por padrão são aqueles que passam para uma nova linha depois que são declarados, ou seja, vão sendo apresentados verticalmente.

Elementos com a propriedade ‘display: inline’ usam o espaço que precisarem, mas não forçam a passagem para uma nova linha depois que são declarados. Ou seja, eles vão sendo apresentados horizontalmente até onde for possível.

Com essas dicas de CSS, veja como posicionar elementos

Dicas de CSS: Posicionando seus blocos

Agora que você consegue visualizar cada um dos elementos como um bloco de pixels, empilhados ou lado a lado, podemos falar da propriedade ‘position’ e sobre como usá-la para colocar seus blocos onde quiser que eles estejam dentro da página.

A propriedade ‘position‘ pode ter quatro valores: ‘absolute‘, ‘relative‘, ‘static‘ e ‘fixed‘. Vamos comentar cada um deles.

Static

Este é o valor padrão para todos os elementos de uma página. Elementos diferentes não têm valores diferentes (como o caso da propriedade ‘display’ visto acima) para a propriedade ‘position’, todos são inicializados como ‘static’. Não há complicação aqui, simplesmente significa que o elemento vai seguir o fluxo da página normalmente.

A única boa razão para atribuir explicitamente o valor ‘position: static’ de um elemento é forçar a remoção de um posicionamento previamente definido. Isto não vai ser frequente, já que a propriedade ‘position’ não se propaga (cascade) e uma folha de estilos mais bem pensada pode evitar isto.

Relative

Esta opção provavelmente é a que mais causa confusão – e também deve ser a mais incompreendida. O que o valor realmente significa é “relativo a si mesmo”.

Quando você define o estilo ‘position: relative;’ em um elemento, mas não altera nenhum outro atributo de posicionamento (‘top’, ‘left’, ‘bottom’, ‘right’), isto não vai afetar em nada o posicionamento – é a mesma coisa que definir como ‘position: static;’.

Porém, se você alterar algum outro atributo de posicionamento, como ‘top: 10px’, por exemplo, o elemento vai deslocar sua posição 10 pixels abaixo de onde ele normalmente estaria. Com certeza você pode imaginar o quanto é útil poder deslocar um elemento a partir de sua posição inicial. É muito comum usar isto em elementos de formulário, que não costumam se alinhar da maneira que você esperava.

É importante se atentar para duas outras coisas que acontecem quando você define a propriedade ‘position: relative;’ em um elemento.

Uma delas é que você vai poder usar a propriedade ‘z-index’ neste elemento, uma vez que ela simplesmente não funciona em elementos posicionados estaticamente. Mesmo que você não defina um valor para ‘z-index’, agora este elemento vai ser apresentado por cima de qualquer outro elemento posicionado estaticamente.

A outra coisa que acontece é que essa opção muda a referência de posição dos elementos filhos que estejam com ‘position: absolute;’.

Se um elemento pai estiver posicionado relativamente, qualquer elemento filho pode ser posicionado absolutamente (‘position: absolute;’) em relação a ele e não em relação à página. Isto cria opções interessantes como, por exemplo, mover o objeto pai sem precisar se preocupar com a posição dos elementos contidos nele.

Absolute

Esta é uma opção poderosa que permite que você literalmente posicione qualquer elemento exatamente onde quiser, utilizando os atributos de posicionamento ‘top’, ‘left’, ‘bottom’, ‘right’ para definir a localização.
Lembre-se de que a posição será definida em relação ao próximo elemento pai que esteja posicionado relativamente ou absolutamente.
Se não houver um elemento pai, por padrão ele vai definir o próprio elemento <html> como sua raiz, o que significa que a posição será definida em relação à própria página web.
O lado ruim do posicionamento absoluto, que é também a coisa mais importante a ser lembrada, é o fato de que estes elementos são removidos do fluxo de elementos da página. Um elemento com esta opção de posicionamento não é afetado por outros elementos e também não afeta os outros.
Você deve levar isto a sério todas as vezes que pensar em usar ‘position: absolute;’. O uso excessivo ou incorreto pode limitar a flexibilidade do seu site.

Fixed

Este tipo de posicionamento é bastante raro, mas certamente tem sua utilidade. A posição de um elemento com posicionamento fixo (position: fixed;) é definida em relação à “viewport”, ou seja, a própria janela do browser.

Quando rolamos a página, a “viewport” não muda, portanto o elemento vai ficar exatamente onde está, criando um efeito um pouco parecido com os “frames” de antigamente.

Um exemplo seria usar uma barra de navegação lateral com posicionamento fixo. A parte boa é que a navegação fica sempre visível durante o uso da página, com um efeito interessante.

A parte ruim diz respeito à usabilidade. Em dispositivos menores (tablets, smartphones ou notebooks pequenos), parte da barra pode ficar cortada e não há como rolar a tela para ver o resto do conteúdo. Essa opção deve ser usada com cuidado.

E então, pronto para aplicar seus novos conhecimentos? Ainda tem alguma dúvida? Deixe um comentário!

Quer saber mais sobre HTML e CSS? Baixe o nosso e-book gratuito sobre o assunto!

1 Comentário

  1. lorenzo disse:

    Oi achei muito interessante mais tenho uma duvida?
    se vc usa o position absolute para ficar na frente de outro elemento digamos assim esse elemento tem que ter as mesmas coordenadas né tipo: bloco1 com position absolute
    e bloco 2 com position relative se vc quer que o position absolute fique na frente do relative os dois teria que ter os mesmos atributos de left e top né??

Deixe o seu comentário!

Não perca nenhum post!