Eu não conseguir entender muito bem em que momento eu devo usar cada uma dessas posições. Alguém que me ajude a compreender melhor?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Eu não conseguir entender muito bem em que momento eu devo usar cada uma dessas posições. Alguém que me ajude a compreender melhor?
position: relative; O elemento é criado na página, após, se houver informações de deslocamento vertical (top ou bot), assim como informações de deslocamento horizontal (left ou right), elas irão reposicionar o elemento com base em sua posição inicial, ou seja:
Se você cria um elemento com posição relativa, podemos imaginar que o desenho dele é carregado na página, porém, na hora em que ele será efetivamente carregado ele pode ser deslocado, alterando, portanto, a posição de exibição do elemento, mas não a posição efetiva deste. A propriedade static, inclusive, definirá o elemento para a posição de seu desenho, ou seja, a sua real posição incial.
Position: absolute; O elemento é removido do fluxo do documento, não deixando espaço a sua criação no layout da página, ou seja, não deixando o seu desenho. O seu posicionamento utiliza do ponto superior esquerdo de outros elementos. Estes elementos são os parentes dele do elemento com position absolute. Mais especificamente o pai.
Portanto, em breves palavras:
Relative: A posição relativa posiciona o elemento em relação a si mesmo. A sua posição será definida a partir de seu canto superior esquerdo, ponto inicial do elemento, calculando com base nisso o deslocamento acrescido.
Absolute: O deslocamento é calculado com base no seu elemento pai, utilizando o seu início (canto superior esquerdo) como ponto inicial e calculando o seu posicionamento com base nesse ponto, ou seja, usando outro elemento como referência.
Espero ter ajudado.
New Saudacoes();
; )