Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login

Position CSS: Definindo a posição de elementos com fixed, relative e absolute

Veja neste artigo uma comparação entre os valores da propriedade position no CSS e como utilizá-los de forma correta .

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (6)  (0)

Motivação

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. 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.

01 .relative-parent {
02    background: #156236;
03 }
04
05 .relative {
06    background: #af8542;
07    height: 100px;
08    width: 300px;
09    position: relative;
10    top: 20px;
11    left: 45px;
12 }
Listagem 1. CSS para position: relative

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.

Position: relative
Figura 1. Position: relative

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.

01 .absolute {
02	background: #c590f5;
03	height: 50px;
04	width: 120px;
05	position: absolute;
06	top: 35px;
07	right: 32px;
08 }
Listagem 2. CSS para position: absolute

O resultado disso pode ser verificado na Figura 2, onde temos o novo elemento <div> posicionado no canto superior direito.

Position: absolute
Figura 2. Position: absolute

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).

Position: fixed
Figura 3. Position: fixed

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.

01 .fixed {
02	background: #a4c467;
03	height: 50px;
04	width: 300px;
05	position: fixed;
06	bottom: 60px;
07	right: 32px;
08 } 
Listagem 3. CSS para position: fixed

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), altura (height) 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.

Carregando
 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Ajude-nos a evoluir: você gostou do post?  (6)  (0)
Confirmar voto
Compartilhe:
Ficou com alguma dúvida?