¿Cuáles son las opciones de posicionamiento de elementos en CSS?

En CSS, existen varias opciones principales para la posición de los elementos:

• static — posición por defecto. Los elementos se colocan en el flujo del documento, sin desplazamientos.
• relative — el elemento se posiciona respecto a su posición normal. Se puede desplazar usando top, left, bottom, right, y aún ocupa su lugar en el flujo.
• absolute — el elemento se posiciona respecto al ancestro más cercano con posición distinta a static (o respecto a la ventana si no hay ninguno). El elemento sale del flujo.
• fixed — el elemento se fija respecto a la ventana del navegador y no se mueve al hacer scroll. También sale del flujo.
• sticky — el elemento se comporta como relative hasta que alcanza una posición definida al hacer scroll, después se comporta como fixed.

Además de la posición, para distribuir elementos a menudo se usan:

• Flexbox — modelo flexible para alinear y distribuir espacio entre elementos en una sola dimensión (fila o columna).
• Grid — modelo de cuadrícula bidimensional para colocar elementos en filas y columnas.
• float — método obsoleto para envolver elementos, se usaba para crear columnas, ahora menos frecuente.

Ejemplo de uso de position:

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