O CSS é essencial no design de aplicações web (e mobile, em alguns casos). Diretamente relacionado a isso, o posicionamento dos elementos é uma parte importante da criação dos layouts. Assim, precisamos conhecer e entender as possibilidades que temos dentro da propriedade position, isto é, as opções fixed, relative e absolute.
Guia do artigo:
A propriedade position também aceita o valor static, que representa o valor padrão, mas ele não indica posicionamento algum, ou seja, é o valor para "nenhum posicionamento específico" do elemento. Nesse artigo, veremos as diferenças entre essas opções e quando cada uma deve ser utilizada.
Opção 1: "position: relative"
A primeira opção de posicionamento para um elemento é a relative. Como o nome sugere, ela especifica uma posição relativa do elemento em relação a algo: o elemento pai.
A posição é definida através de quatro outras propriedades: top, bottom, left e right, que indicam a distância com relação ao topo, base, esquerda e direita, respectivamente, tomando como referência o posicionamento do elemento pai.
Para entendermos melhor esse conceito, vejamos o CSS da Listagem 1.
.relative-parent { background: #156236; } .relative { background: #af8542; height: 100px; width: 300px; position: relative; top: 20px; left: 45px; }
- Linha 01: declaração da classe relative-parent. Define o estilo para o elemento pai em nosso posicionamento relativo. Observe que não há nenhuma quanto à propriedade position. Assim, temos que o valor dela é static;
- Linha 02: Especifica uma cor de fundo para os elementos da classe relative-parent. É a única característica presente nessa classe;
- Linha 05: declaração da classe relative. Define o estilo para o elemento filho, que terá seu posicionamento determinado de acordo com o posicionamento do elemento pai;
- Linha 06: indica a cor de fundo para os elementos da classe relative;
- Linhas 07 e 08: propriedades de altura (height) e largura (width) para o elemento, em pixels;
- Linha 09: indica a propriedade position para nossa classe. Nesse caso, com o valor relative;
- Linhas 10 e 11: especifica as distâncias com relação ao topo (top) e esquerda (left) com relação ao elemento pai. As distâncias, nesse caso, estão em pixels, mas poderia ser utilizado porcentagem ou em, uma medida relativa empregada no CSS. É importante ressaltar que esses valores podem ser negativos.
As classes definidas nessa folha de estilos são utilizadas no seguinte HTML:
<div class="relative-parent"> <div class="relative"> Elemento filho com posicionamento relativo </div> </div>
Note que temos uma classe em cada elemento: uma representará o elemento pai e a outra, o elemento filho.
O resultado do que fizemos pode ser observado na Figura 1. À esquerda, temos o resultado com um CSS diferente, sem as linhas 9 a 11 da Listagem 1. Nesse caso, não há um posicionamento relativo de um elemento em relação ao outro, pois isso ainda não foi definido. Já à direita, temos o resultado com o CSS da Listagem 1 completo. Observe que o elemento filho está posicionado de forma relativa ao pai, por causa dos parâmetros que informamos na folha de estilos.
Opção 2: "position: absolute;"
A segunda opção de posicionamento é a absolute, ou absoluto. Ela faz com que o elemento “saia” da hierarquia estabelecida pelo HTML – na prática, ele é filho da página e não de um elemento qualquer no HTML definido. Assim, é possível posicionarmos esse elemento em qualquer lugar da página, independentemente do que temos lá. Isso pode ser útil em casos que precisamos posicionar um alerta em nossa página, por exemplo, e não queremos “quebrar” o layout.
Apesar dessa possibilidade, é importante utilizar o layout absoluto de forma responsável, uma vez que ele, por não fazer parte da hierarquia da página, pode atrapalhar o desenvolvimento responsivo. Assim, o funcionamento em dispositivos com resoluções menores, como tablets e smartphones, pode ser prejudicado.
Na prática, para um HTML simples, como o apresentado a seguir, o <div> será filho de <body>. Entretanto, como especificamos um posicionamento absoluto, o elemento pai não nos interessa, uma vez que não consideraremos seu posicionamento como referência.
<div class="absolute"> Elemento com posicionamento absoluto </div>
Note que a classe absolute, apresentada na Listagem 2, é bastante semelhante ao CSS que vimos na Listagem 1. No entanto, existem algumas diferenças importantes:
- Linha 01: declaração da classe absolute. Define o estilo para o elemento com posicionamento absoluto;
- Linha 02: informar a cor de fundo para os elementos da classe;
- Linhas 03 e 04: atribuição dos valores para altura height e largura width dos elementos da classe;
- Linha 05: determina o posicionamento dos elementos da classe, com a opção absolute;
- Linhas 06 e 07: especifica duas propriedades de posicionamento: right e top, referentes à distância em relação à direita e ao topo da página. Note que essa é a mesma proposta vista anteriormente, no posicionamento relativo, mas com a diferença que estamos atribuindo a distância para a página, e não mais para um elemento pai.
.absolute { background: #c590f5; height: 50px; width: 120px; position: absolute; top: 35px; right: 32px; }
O resultado disso pode ser verificado na Figura 2, onde temos o novo elemento <div> posicionado no canto superior direito.
Opção 3: "position: fixed"
Por fim, temos a opção fixed, que funciona de forma diferente em relação às demais. Embora seja parecida com o posicionamento absoluto, com fixed o elemento “responde”, em termos de layout, ao navegador. Isso significa que, mesmo que naveguemos na página para cima e para baixo, o elemento ficará fixo na mesma posição sempre.
Esse tipo de posicionamento é especialmente útil em casos de menu, para que o usuário não perca o contato com a navegação enquanto lê uma notícia, por exemplo. Sites com conteúdo extenso costumam adotar essa opção para melhorar a experiência do usuário.
Para melhor compreender seu funcionamento, vejamos o exemplo da Figura 3, no qual inserimos o texto fictício lorem ipsum na página. Observe que, na janela à direita, a barra de rolagem nos mostra que estamos no topo da página; e, à esquerda, na base da mesma. Note que, em relação ao navegador, o novo elemento está exatamente na mesma posição (no canto inferior direito).
Para chegarmos a esse comportamento, apenas utilizamos uma nova classe CSS, fixed, como podemos observar no código abaixo:
<div class="fixed"> Elemento com posicionamento fixo </div>
A classe criada é, novamente, muito similar às que vimos nas Listagens 1 e 2. A diferença é que agora temos um position: fixed definido para os elementos, o que pode ser observado na Listagem 3.
.fixed { background: #a4c467; height: 50px; width: 300px; position: fixed; bottom: 60px; right: 32px; }
- Linha 01: declaração da classe fixed. Define as características dos elementos com posicionamento fixo;
- Linhas 02 a 04: informa a cor de fundo background, alturaheight e largura width dos elementos da classe;
- Linha 05: com essa propriedade, passando o valor fixed, temos a declaração do tipo de posicionamento que queremos para os nossos elementos;
- Linhas 06 e 07: especificamos as distâncias dos elementos da classe em relação ao navegador. Repare que, dessa vez, especificamos bottom e right, distância da base e direita, respectivamente. Como estamos com um posicionamento fixo, é utilizado o navegador para calcular essa distância, ou seja, o elemento permanecerá na mesma posição independentemente do lugar da página em que estivermos.
Com isso, aprendemos que o posicionamento no CSS é algo relativamente simples. É preciso, no entanto, um pouco de cuidado na hora de utilizar a propriedade, afinal, ela é interessante para o posicionamento pontual de determinados elementos. Ainda assim, antes de tomar essa decisão, considere o uso de outras opções, como a propriedade float ou técnicas de desenvolvimento responsivo com grids, como a adotada pelo Bootstrap e outros frameworks.
