Pular para o conteúdo

Programando Soluções

Position relative e absolute do CSS

  • por
relative e absolute

O position relative e absolute é um assunto que gera muitas dúvidas para quem está aprendendo CSS.

Por isso resolvi escrever este post para poder sanar essas dúvidas e mostrar como os posicionamentos funcionam.

Propriedade Position

Essa propriedade do CSS define qual será o posicionamento de um elemento referente ao documento HTML.

Ou seja, como esse elemento será posicionado na tela, em relação aos outros elementos.

É possível atribuir alguns valores para position, são eles:

  • static
  • relative
  • absolute
  • fixed
  • sticky

Position Relative

O relative indica como o elemento deverá se comportar de acordo com a sua posição inicial.

Por exemplo, imagine uma tela com somente um quadrado grudado no canto esquerdo.

E você quer que o quadrado não fique grudado no canto, você quer dar uma distância da borda.

Com isso você pode aplicar o CSS left:50px no elemento, para ele ficar 50px longe da borda esquerda.

E utilizando o position: relative você vai conseguir fazer o elemento desgrudar da borda.

Ou seja, você acabou de mover o quadrado da sua posição original, e o relative sempre fará isso, moverá o elemento em relação a sua posição original.

Código do exemplo:

.quadrado {
  position: relative;
  left: 50px;
  width: 200px;
  height: 200px;
  background-color: blue;
}

Resultado:

Não parece muito na imagem, mas este quadrado não está grudado na borda esquerda.

Position Absolute

Imagine agora a situação onde temos um retângulo, e dentro dele temos um quadrado.

E agora queremos fazer com que esse quadrado fique no canto direito do retângulo, e não da tela.

É aqui que entra o absolute, quando você aplica o position absolute em um elemento, automaticamente ele irá aplicar o estilo com base no elemento “pai” dele.

No nosso exemplo, o quadrado irá utilizar o retângulo como base para aplicar o estilo.

O retângulo que é o elemento pai, deve ter o position relative, pois um absoluto “filho” de um elemento, o pai precisa ter o relative para aplicar o estilo corretamente.

O código fonte ficará assim:

<div class="retangulo">
      retangulo position relative
      <div class="quadrado">quadrado position absolute</div>
    </div>
div.retangulo {
  position: relative;
  width: 500px;
  height: 300px;
  border: 3px solid red;
}

div.quadrado {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 200px;
  border: 3px solid red;
}

Os elementos ficarão assim:

Quando usar os dois

Você pode pensar em utilizar o position relative e absolute em algumas ocasiões:

Utilize o position relative, quando você quiser mover o elemento na tela, e todo o estilo de posicionamento que você colocar, será aplicado de acordo com a posição original.

Utilize o position absolute, quando você quiser mover um elemento que está dentro de outro, e você quer fazer com que esse elemento a ser mexido, respeite o tamanho do elemento “pai”.

Caso o elemento “pai” não tenha o relative, o elemento que estiver com absolute, irá respeitar o tamanho da tela, e não do elemento “pai”

No caso do quadrado ele ficaria do outro lado da tela, fora do retângulo.

Conclusão

O position relative e absolute no CSS podem gerar algumas dúvidas, porém eles não são um bicho de sete cabeças.

E nesse post conseguimos ver o que são os posicionamentos relative e absolute, e também em qual ocasião utilizar.

Espero ter ajudado, até o próximo post 🙂

Para ver outros canais onde o posto conteúdo sobre CSS, veja os Links do Programando Soluções.

Referências

https://www.w3schools.com/css/css_positioning.asp

Este conteúdo te ajudou de alguma forma?

Marcações:
Usamos cookies para lhe proporcionar a melhor experiência possível no nosso site. Ao continuar a usar este site, você concorda com o uso de cookies.
Ok