1. position: relative

Quando você aplica position: relative a um elemento, você está mudando o contexto de posicionamento desse elemento. Isso significa que ele ainda ocupa seu espaço original no fluxo do documento, mas você pode ajustá-lo em relação a esse ponto original sem afetar a posição de outros elementos na página. Em outras palavras, o elemento é movido visualmente, mas para propósitos de layout, é considerado estar em sua posição original.

Como Funciona?

Ao definir um elemento como position: relative, você o torna o ponto de referência para qualquer elemento filho que tenha position: absolute aplicado. Além disso, você pode usar as propriedades top, right, bottom e left para mover o elemento relativamente à sua posição original no layout da página.

Exemplo Prático:

Suponha que temos um parágrafo comum dentro de uma página e queremos movê-lo um pouco para baixo e para a direita, sem alterar o layout geral da página.

<p class="relativo">Este é um parágrafo com position: relative.</p>

E o CSS:

.relativo {
  position: relative;
  top: 20px; /* Move o parágrafo 20px para baixo a partir de sua posição original */
  left: 40px; /* Move o parágrafo 40px para a direita a partir de sua posição original */
  background-color: lightblue; /* Apenas para visualização */
}

Neste exemplo, o parágrafo será movido 20 pixels para baixo e 40 pixels para a direita em relação à sua posição normal. No entanto, o espaço que ele originalmente ocupava permanece reservado, e o movimento não afeta a posição de outros elementos na página.

Usos Comuns:

• Ajustar ligeiramente a posição de um elemento para alinhamento fino ou para criar efeitos de sobreposição.
• Servir como ponto de referência para elementos absolutamente posicionados dentro dele.
• Aplicar deslocamentos pequenos sem alterar o layout geral do documento.

2. position: absolute

A propriedade position: absolute tem um papel fundamental no design de layouts complexos e dinâmicos em CSS, permitindo um controle preciso sobre a localização dos elementos na página.

O que é position: absolute?

Quando você define um elemento com position: absolute, esse elemento é removido do fluxo normal do documento, o que significa que ele não afeta a posição de outros elementos e vice-versa. Em vez disso, ele é posicionado em relação ao seu contêiner ancestral mais próximo que possui uma propriedade position definida como algo diferente de static (o valor padrão), frequentemente relative, absolute, ou fixed.

Como Funciona?