CSS: position

(Elivelto Ebermam)

 

A propriedade position define o método de posicionamento dos elementos na tela. A propriedade position trabalha em conjunto com outras quatro propriedades: top, left, right e bottom. Essas propriedades são responsáveis por deslocar os elementos.

Para a propriedade position há cinco valores possíveis: static, relative, absolute, fixed e sticky. Cada um desses valores tem características próprias.

 

Static

O valor static é o valor padrão de position, ou seja, se você não informar qual é a position do elemento, o navegador entenderá que é static. Quando o valor é static, não é possível atribuir ao elemento as propriedades top, left, right e bottom. Assim, o elemento sempre ficará no canto (a não ser que se use margens). Veja um exemplo:

 

Disponível em: https://www.w3schools.com/code/tryit.asp?filename=GKAL0H05HL3K

 

No exemplo há três divs, todas com posicionamento static. As três divs se comportam normalmente, se posicionando a esquerda, e uma abaixo da outra.

 

Relative

Já quando o valor de position é relative, é possível acessar as propriedades top, left, right e bottom do elemento. Essas propriedades dizem qual o espaçamento os elementos terão em relação ao espaço em que deveriam estar posicionadas. Por exemplo, a propriedade top é a distância em relação ao topo. Veja um exemplo:

 

Disponível em: https://www.w3schools.com/code/tryit.asp?filename=GKAN56CSI8IX

 

No exemplo, a div em verde tem o posicionamento relative. Sua posição seria a mesma do que se fosse static. Porém, as propriedade top e left causam um deslocamento na div. Ela é deslocada 20 pixels no topo e 20 pixels na esquerda. Assim a div em verde acaba sobrepondo a div em azul.

 

Absolute

Quando o valor de position é absolute, o elemento é posicionado em relação ao elemento ancestral (elemento em que está contido). Assim como no posicionamento relative, é possível definir os valores das propriedades top, left, right e bottom. A diferença é que um elemento com posição absolute ignora o posicionamento de outros elementos que estejam no mesmo nível, veja um exemplo:

 

 

Disponível em: https://www.w3schools.com/code/tryit.asp?filename=GKANRDLMZMMF

 

No exemplo a div em verde não iniciou após a div vermelha, ao invés disso, a sobrepôs. Isso ocorre porque ela se posiciona em relação ao seu elemento ancestral (que é o body). Assim, a div se posiciona a 20 pixels do topo e 20 pixels da esquerda, valores estabelecidos com as propriedades top e left. A div com o posicionamento absolute simplesmente ignora as outras divs.

 

Fixed

A posição fixed, como o nome já diz, é uma posição fixa. Assim, o elemento com posição fixed se posicionará em relação a tela. Para definir onde se posicionará na tela, são usadas as propriedades top, left, right e bottom. A diferença entre esse posicionamento para os anteriores fica nítida ao rolar a página, pois você verá os outros elementos se movimentando na tela e o elemento com posição fixed permanecerá no mesmo lugar. Veja um exemplo:

Disponível em: https://www.w3schools.com/code/tryit.asp?filename=GKAOZFU3IEKG

 

Agora vamos rolar a barra dessa página web:

 

Note que mesmo rolando a barra, a div verde permanece na mesma posição: 20 pixels do topo e 20 pixels da esquerda.

Esse tipo de posicionamento é muito importante quando queremos que alguma parte da página esteja sempre visível, um menu por exemplo.

 

Sticky

Recentemente foi adicionado mais um tipo de posicionamento: sticky. Em alguns navegadores ele ainda pode não funcionar. Esse posicionamento se comporta como relative inicialmente, e ao rolar a barra da página ele muda o comportamento para fixed. Veja um exemplo:

Disponível em: https://www.w3schools.com/code/tryit.asp?filename=GKAPD2H8R9G3

 

Agora vamos rolar a barra dessa página web: