Quando usar position absolute ou relative em CSS?

A propriedade CSS position é utilizada para controlar o posicionamento de um elemento em relação aos elementos vizinhos ou à janela do navegador.

O valor absolute faz com que o elemento seja posicionado de forma absoluta em relação ao elemento pai mais próximo que tenha uma posição definida (ou seja, position diferente de static). Ele pode ser movido utilizando as propriedades top, right, bottom e left. Quando um elemento possui position: absolute, ele é removido do fluxo normal do documento e afeta a posição dos outros elementos ao seu redor.

Por outro lado, o valor relative faz com que o elemento seja posicionado de forma relativa ao seu próprio local natural no fluxo normal do documento. Nesse caso, o elemento pode ser movido utilizando as mesmas propriedades (top, right, bottom e left), mas o movimento ocorre mantendo o espaço ocupado pelo elemento original, ou seja, ele não afeta a posição dos outros elementos ao seu redor.

Em resumo, use position: absolute quando você quiser posicionar um elemento de forma precisa em relação ao elemento pai mais próximo com uma posição definida. Um exemplo comum é a criação de menus dropdown. Por outro lado, use position: relative quando você quiser mover um elemento dentro de seu próprio espaço no fluxo normal do documento, seja para ajustar seu posicionamento ou criar animações de transição suaves.

Por exemplo, suponha que você tenha uma div com o seguinte CSS:

div {
  position: relative;
  top: 10px;
  left: 20px;
}

Neste caso, a div será movida 10 pixels para baixo e 20 pixels para a direita em relação à sua posição normal no fluxo do documento.