Position

O position é um atributo do CSS que define a posição de um elemento na página. Ele pode ser usado para criar layouts complexos, além de permitir que os elementos sejam posicionados de forma exata. Existem quatro valores principais para o position: static, relative, absolute e fixed.

O valor static é o padrão e significa que o elemento segue o fluxo normal da página. Por exemplo, se você tiver um elemento <div> dentro de outro <div>, o elemento interno seguirá o fluxo normal do elemento externo. Exemplo:

<div>
  <div>Elemento interno</div>
</div>

O valor relative significa que o elemento é relativo ao seu elemento pai. Isso significa que você pode usar o atributo top, bottom, left e right para mover o elemento em relação ao seu elemento pai. Exemplo:

<div>
  <div style="position: relative; top: 10px; left: 10px;">
	Elemento interno
	</div>
</div>

O valor absolute significa que o elemento é posicionado em relação ao elemento pai mais próximo que tiver o position definido como algo diferente de static. Isso significa que você pode usar o atributo top, bottom, left e right para mover o elemento em relação ao seu elemento pai.

Exemplo:

<div style="position: relative;">
  <div style="position: absolute; top: 10px; left: 10px;">
		Elemento interno
	</div>
</div>

O valor fixed significa que o elemento é posicionado em relação à janela do navegador. Isso significa que você pode usar o atributo top, bottom, left e right para mover o elemento em relação à janela do navegador.

Exemplo:

<div style="position: fixed; top: 10px; left: 10px;">
Elemento interno
</div>