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