Oi Rafael, tudo bem?
Vamos lá! O elemento é pai quando ele contém outro elemento que aí seria o filho. Veja o seguinte exemplo:
<html>
<head>
</head>
<body>
<h1>Exemplo</h1>
</body>
</html>
O HTML
não tem pai pois ninguém está contendo ele nesse caso. Ele é pai diretamente dehead
e body
. Consegue perceber isso? Agora, você acha que esses dois elementos são pais de alguém?
Olhando para o head
podemos ver que ele não está contendo nada certo? Portanto, ele não é pai de ninguém.
Agora o body
está envolvendo o h1
então ele é elemento pai dele, viu só?
Agora vamos para as diferenças entre relative e absolute:
Position relative: posiciona o elemento em relação a si mesmo. Ou seja, o ponto zero será o canto superior esquerdo, e ele começará a contar a partir dali. Todos os positions precisam de um ponto para iniciar o cálculo da coordenada para assim posicionar o elemento na tela. Ao contrário do que muitos acham, esse ponto não é o ponto central do elemento, o ponto base é o canto superior esquerdo do elemento. A partir deste canto, o browser irá calcular a coordenada que você definiu e irá posicionar o elemento no viewport.
Já o position absolute é um pouco diferente do Relative. O elemento com Position Relative utiliza seu próprio canto para referenciar sua posição certo? Só que o elemento com Position Absolute faz diferente, ele se utiliza do ponto superior esquerdo de outros elementos. Estes elementos são os parentes dele do elemento com position absolute. Mais especificamente o pai.
Isso é só um resumo, vou deixar aqui um artigo da própria Alura para você entender a propriedade position, com exemplos que você pode visualizar melhor.
Espero ter te ajudado :), bons estudos.