CSS: Devo usar position relative no elemento pai, sempre que usar position absolute no elemento filho

Não é necessário usar position: relative no elemento pai sempre que você usar position: absolute no elemento filho. A propriedade position: relative no elemento pai é usada principalmente como um ponto de referência para posicionar elementos filhos que têm position: absolute aplicado a eles.

Quando você define position: absolute em um elemento filho, ele é posicionado em relação ao elemento pai que tenha position: relative (ou ao documento HTML, se nenhum elemento pai tiver position: relative definido). Se nenhum elemento pai tiver position: relative, o elemento filho com position: absolute será posicionado em relação ao corpo do documento.

No entanto, se você quiser posicionar um elemento filho usando position: absolute em relação a um elemento pai específico, você precisa garantir que o elemento pai tenha position: relative aplicado a ele. Caso contrário, o elemento filho com position: absolute será posicionado em relação ao elemento pai mais próximo que tenha uma posição diferente de static (a posição padrão).

Aqui está um exemplo:

HTML:

<div class="pai">
<div class="filho">Elemento filho</div>
</div>

CSS:

.pai {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: red;
}
 
.filho {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: blue;
  color: white;
}

Neste exemplo, o elemento filho é posicionado no centro do elemento pai, porque o elemento pai tem position: relative. Se você remover position: relative da classe .pai, o elemento filho será posicionado em relação ao corpo do documento.

Em resumo, position: relative no elemento pai é necessário apenas quando você deseja posicionar elementos filhos com position: absolute em relação a esse elemento pai específico. Caso contrário, não é necessário usar position: relative no elemento pai.