Quais são as opções de posicionamento de elementos em CSS?

Existem várias opções principais para o posicionamento de elementos em CSS:

• static — posição padrão. Os elementos são colocados no fluxo do documento, sem deslocamentos.
• relative — o elemento é posicionado relativamente à sua posição normal. Pode ser deslocado usando top, left, bottom, right, mantendo seu lugar no fluxo.
• absolute — o elemento é posicionado relativamente ao ancestral mais próximo com posição diferente de static (ou à janela se não houver). O elemento sai do fluxo.
• fixed — o elemento é fixado em relação à janela do navegador e não se move ao fazer scroll. Também sai do fluxo.
• sticky — o elemento comporta-se como relative até atingir uma posição definida ao fazer scroll, depois comporta-se como fixed.

Além do posicionamento, para distribuir elementos, frequentemente usam-se:

• Flexbox — modelo flexível para alinhar e distribuir espaço entre elementos em uma única dimensão (linha ou coluna).
• Grid — modelo de grade bidimensional para colocar elementos em linhas e colunas.
• float — método obsoleto para envolver elementos, usado para criar colunas, mas menos comum atualmente.

Exemplo de uso de position:

.element {
  position: absolute;
  top: 10px;
  left: 20px;
}