Entenda a propriedade Position CSS

Entenda a propriedade Position CSS
Luan Alves
Luan Alves

Compartilhe

Olá, Dev! Você provavelmente deve ter se questionado como é possível fixar uma lista lateral no canto da tela, ou como fixar um menu no topo independente da barra de rolagem, até mesmo como conseguir posicionar um elemento tendo outro como referência. Com a propriedade position, é possível fazer isso e muito mais! Neste artigo vamos aprender sobre cada uma das suas possibilidades de uso.

Position significa posição em português. O posicionamento padrão de todo elemento no HTML é estático, ou seja, possui o valor position: static, mesmo que este valor não tenha sido declarado. Todo elemento estático é posicionado alinhado pelo canto superior esquerdo no corpo do documento. Não sendo possível alterar sua posição. Esta é a posição 0 de um elemento no corpo do documento, segundo as coordenadas do HTML.

E agora? Como posso alterar a posição de um elemento?

Para alterarmos a posição de um elemento é preciso primeiro modificar o seu valor que vem por padrão: static. Para a propriedade position, é possível atribuir 5 valores, que são: static, fixed, sticky, relative e absolute.

Alterando o Position, podemos também utilizar outras quatro propriedades auxiliares que são: top, bottom, left e right. Apenas o position static ignora o valor dessas propriedades. Elas podem ser utilizadas com todos os outros tipos de positions possibilitando definir a posição de um elemento. As referências de topo, inferior, esquerda e direita podem mudar dependendo do tipo de position aplicado.

Vamos agora entender os tipos de positions e como as propriedades auxiliares se comportam em cada caso:

Static

Imagem do tipo gif com dois quadrados (um verde maior e outro azul menor sobreposto) em uma tela de fundo cinza. A animação inicia com os dois posicionados no canto superior esquerdo da tela e permanecem estáticos quando habilita a rolagem da tela de cima para baixo e da esquerda para direita.

O position static, que em português significa estático, é o mais utilizado de todos, pois, como dito acima, trata-se do valor que já vem por padrão quando criamos elementos no HTML. Seu comportamento, como o nome sugere, é ser estático. Ele apenas segue o fluxo junto dos outros elementos da página normalmente, tendo o canto superior esquerdo como referência.

Este elemento não aceita as propriedades auxiliares top, bottom, left e right. No exemplo abaixo, mesmo aplicando o código position: static e top: 20px, o elemento não move 20 pixels do topo para baixo. Ele continua estático sendo alinhado no canto superior esquerdo. Observe:

See the Pen position: static by Luan (@luanalvesdev) on CodePen.

https://codepen.io/luanalvesdev/pen/QWqVdQQ

Fixed

Imagem do tipo gif com dois quadrados (um verde maior e outro azul menor sobreposto) em uma tela de fundo cinza. A animação inicia com os dois posicionados no canto inferior direito da tela e permanecem fixos quando habilita a rolagem da tela de cima para baixo e da esquerda para direita.

O position fixed, que em português significa fixo, faz com que o elemento que recebeu esta propriedade não se mova na tela. Mesmo que uma página tenha rolamento (scroll). Ao utilizarmos o rolamento para esquerda e direita, ou para cima e para baixo, o elemento não se move.

Veja que, quando aplicado bottom: 0% e right: 5%, o elemento está a 0% de distância da parte inferior da tela, ou seja, colado na parte debaixo, e 5% de distância do lado direito.

Teste no exemplo abaixo utilizando o rolamento e observe o comportamento:

See the Pen Position - Fixed by Luan (@luanalvesdev) on CodePen.

https://codepen.io/luanalvess/pen/wvrExxq

Sticky

Imagem do tipo gif com dois quadrados (um verde maior e outro azul menor sobreposto) em uma tela de fundo cinza. A animação inicia com os dois posicionados no centro inferior da tela e permanecem fixos em relação ao rolamento da página de cima para baixo e da esquerda para direita.

O position sticky, que em português significa pegajoso ou colado, é parecido com o fixed, porém a sua diferença é que, em vez dele ficar fixo em relação à tela, ele fica fixo em relação ao rolamento da página.

Este tipo de position é utilizado sempre em conjunto das propriedades auxiliares, pois precisa de um posicionamento de referência. Abaixo é possível conferir isso. Aplicamos top: 0%; e left: 0%, que faz com que quando utilizado o rolamento para baixo, o elemento suba, porém quando chega no limite do topo da tela, ele fica “colado”, e o mesmo acontece para o lado esquerdo, quando arrastamos a barra de rolagem para a direita, o elemento chega no limite da tela do lado esquerdo, no entanto, também fica “colado” no limite deste lado da tela. O elemento volta a ocupar a sua posição inicial quando voltamos com a barra de rolagem como antes.

Utilizando o rolamento no exemplo abaixo é possível analisar o seu comportamento:

See the Pen Position - Sticky by Luan (@luanalvesdev) on CodePen.

https://codepen.io/luanalvess/pen/qBPMyJB

Relative

Imagem do tipo gif com dois quadrados (um verde maior e outro azul menor sobreposto) em uma tela de fundo cinza. No lado esquerdo, a tela de código CSS da tela. A animação inicia com os dois quadrados posicionados no centro inferior da tela, com o azul encostado nas laterais do canto superior esquerdo do verde. Ao escrever `top: 50px`, o quadrado azul se move para baixo. Em seguida, ao escrever `left: 50px`, ele se move para a direita.

O position relative, que em português significa relativo, é usado quando queremos alterar a posição de um elemento tendo como referência a posição inicial dele. Ao aplicarmos essa propriedade em um elemento, ele não muda de posição, pois já vai estar posicionado em sua posição de referência. Porém, quando aplicamos top: 50px, e left: 50px no elemento, como no exemplo abaixo, sua posição se altera 50 pixels de cima para baixo, e da esquerda para direita tendo como referência a sua posição inicial. Observe:

See the Pen Position - Relative by Luan (@luanalvesdev) on CodePen.

https://codepen.io/luanalvess/pen/yLzxqGx

Absolute

Position absolute, ou posicionamento absoluto em português, possui dois comportamentos diferentes. O primeiro é quando o elemento com essa propriedade possui um elemento pai de valor diferente de static. Neste caso, ele terá este elemento pai como referência para ser posicionado. Todo elemento pai que tiver qualquer valor de position, menos o static, será a referência para posicionar o elemento filho absolute!

O segundo comportamento é quando o elemento com position absolute não tem elemento pai, ou este elemento pai possui position static. Nesta situação, ele irá ignorar estes elementos e será posicionado a partir do canto esquerdo superior do documento, podendo até mesmo sobrepor a eles. Ou seja, é importante utilizar o absolute tendo certeza da necessidade do seu uso (não que isso não seja necessário para os outros valores), pois ele pode desalinhar o layout da página.

Para entendermos na prática como funciona, temos, no próximo exemplo, o elemento pai, que é a caixa verde, sendo um position relative, posicionado 150 pixels do topo de sua posição inicial, e o elemento filho dele, que é a caixa azul, sendo um position: absolute com valores top: 50px e left: 50px. É possível observarmos que o elemento filho está tendo o canto superior do elemento pai como referência, posicionado a 50 pixels do topo e 50 pixels à esquerda dele:

Imagem do tipo gif com dois quadrados (um verde maior e outro azul menor sobreposto) em uma tela de fundo cinza. No lado esquerdo, a tela de código CSS da tela. A animação inicia com os dois quadrados posicionados ao lado esquerdo da tela, com o azul encostado nas laterais do canto superior esquerdo do verde. Ao escrever `position:absolute` e `top: 50px`, o quadrado azul se move para baixo. Em seguida, ao escrever `left: 50px`, ele se move para a direita.

See the Pen Position - Absolute - 1 by Luan (@luanalvesdev) on CodePen.

https://codepen.io/luanalvess/pen/poWOZqZ

Já no exemplo a seguir, o elemento pai não está com o position declarado, ou seja, ele é um position static. Seu elemento filho possui position absolute. Neste caso, o elemento filho ignora o posicionamento do elemento pai, estando alinhado 50 pixels do topo e do lado esquerdo do documento.

Imagem do tipo gif com dois quadrados (um verde maior e outro azul menor sobreposto) em uma tela de fundo cinza. No lado esquerdo, a tela de código CSS da tela. A animação inicia com os dois quadrados posicionados ao lado esquerdo da tela, com o azul encostado nas laterais do canto superior esquerdo do verde. Ao escrever `position:absolute`e `top: 50px`, o quadrado azul se move para cima. Em seguida, ao escrever `left: 50px`, ele se move para a direita do topo da página.

See the Pen Position - Absolute - 2 by Luan (@luanalvesdev) on CodePen.

https://codepen.io/luanalvesdev/pen/wvrQRQy

Agora é hora de praticar!

Já sabemos como posicionar e fixar elementos, e agora é hora de fixar o conteúdo que você aprendeu. Para isso, você pode alterar o código e testar o resultado nos exemplos do code.pen acima, e também realizar a nossa Formação HTML e CSS onde você irá desenvolver projetos utilizando positions. Bons estudos! :)

Luan Alves
Luan Alves

Sou Luan Alves, estudando de Análise e Desenvolvimento de Sistemas, instrutor de Desenvolvimento Front-End no Grupo Alura. Estou aqui para ajudar a tirar suas dúvidas, aprender e compartilhar conhecimento. :)

Veja outros artigos sobre Front-end