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.
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!
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é??