No CSS, o posicionamento nos permite controlar como os elementos são dispostos em uma página. Dois tipos comuns de posicionamento são o posicionamento estático e o posicionamento relativo. Por padrão, os elementos são posicionados estaticamente. Isso significa que eles seguem o fluxo normal do documento, um após o outro, de cima para baixo, da esquerda para a direita. O posicionamento estático é o padrão para todos os elementos e não precisa de nenhuma declaração especial em CSS. Você não notará nenhuma diferença ao usar posicionamento estático porque ele apenas mantém os elementos onde eles ocorrem naturalmente no documento. Aqui está um exemplo de um parágrafo usando posicionamento estático padrão:

<p>This paragraph is statically positioned.</p>

Quando renderizado no navegador, este parágrafo aparecerá em sua posição natural, seguindo o fluxo normal do documento. Nenhum estilo especial é aplicado para movê-lo, e ele permanece onde apareceria naturalmente no layout. O posicionamento relativo, por outro lado, permite que um elemento seja deslocado de sua posição normal sem interromper o fluxo do documento. Pense nisso como mover o elemento de sua posição estática padrão dando-lhe novas coordenadas. Aqui está como você pode aplicar posicionamento relativo:

<link rel="stylesheet" href="styles.css">
<p class="relative">This paragraph is positioned relatively.</p>

body {
  border: solid 1px black;
}

.relative {
  position: relative;
  top: 30px;
  left: 30px;
}

Neste exemplo, o parágrafo aparecerá 30px para baixo e 30px para a direita da sua posição original. No entanto, o espaço que ele teria ocupado no fluxo normal permanece preservado. O posicionamento relativo é muito útil quando você quer mover um elemento ligeiramente sem afetar o restante do layout.