Confesso que revi essa parte três vezes, mas ainda não entrou na minha cabeça. Você teria uma material para me indicar?
2
respostas
respostas
Position relative e absolute
Tem esses dois sites (referências) com muitos exemplos, mas para compreender as diferenças de fato, só na prática. Faça seus próprios exemplos, até entender como funcionam.
site: http://www.maujor.com/tutorial/absrel.php
site: https://developer.mozilla.org/pt-BR/docs/Web/CSS/position
Fala Paulo, tudo bom?
Vamos lá: tanto relative quanto absolute tem como REFERÊNCIA o elemento pai na árvore que possua um position(relative ou absolute) definido. Caso não tenha nenhum position definido, ele sobe até chegar no <body>.
Por exemplo: Se o seu elemento pai definiu position:relative e o filho absolute, o filho terá como referência o pai.
O position:relative quando é movido "mantém o espaço" que deveria ocupar caso você não mexesse utilizando as propriedades top, right, left, bottom para movê-lo.
Já o position:relative não mantém esse espaço, ou seja, permite que "outras coisas" preencham.
https://tableless.com.br/propriedade-position-do-css/
http://pt.stackoverflow.com/questions/38215/quando-usar-position-absolute-ou-relative-em-css