¿Cuál es la diferencia entre los diferentes métodos…

static - Posición por defecto. El elemento se posiciona según el flujo normal del documento. Las propiedades top, right, bottom, left no afectan.
relative - El elemento se posiciona respecto a su posición normal en el flujo. Las propiedades top, right, bottom, left desplazan el elemento desde su posición original, pero el espacio que ocupa en el flujo se mantiene.
absolute - El elemento se elimina completamente del flujo normal del documento. Su posición se determina mediante las propiedades top, right, bottom, left respecto al ancestro posicionado más cercano (con position: relative, absolute, fixed o sticky). Si no hay tales ancestros, la posición se determina respecto al bloque inicial <html>.
fixed - El elemento se elimina completamente del flujo normal del documento. Su posición se determina mediante las propiedades top, right, bottom, left respecto a la ventana de visualización (viewport). El elemento permanece en su lugar al desplazarse la página.
sticky - El elemento se posiciona como relative hasta que al desplazarse alcanza la posición definida por top, right, bottom, left, momento en el cual su posición se vuelve fixed.

Tabla de diferencias:

Propiedad	`static`	`relative`	`absolute`	`fixed`	`sticky`
Flujo del documento	Normal	Mantiene	Se elimina	Se elimina	Primero normal, luego se elimina
Desplazamiento (`top` etc.)	No	Respecto a sí mismo	Respecto al ancestro/viewport	Respecto al viewport	Respecto a sí mismo, luego al viewport
Al desplazarse	Se desplaza	Se desplaza	Permanece en su lugar (si el ancestro es `fixed`) o se desplaza con el ancestro	Permanece en su lugar	Primero se desplaza, luego permanece en su lugar

Ejemplo:

.static-box {
  position: static; /* Posición por defecto */
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.relative-box {
  position: relative;
  top: 20px; /* Desplazamiento hacia abajo desde la posición normal */
  left: 20px; /* Desplazamiento hacia la derecha desde la posición normal */
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

.absolute-container {
  position: relative; /* Ancestro posicionado */
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.absolute-box {
  position: absolute;
  top: 50px; /* Respecto al contenedor */
  left: 50px; /* Respecto al contenedor */
  width: 50px;
  height: 50px;
  background-color: lightcoral;
}

.fixed-box {
  position: fixed;
  bottom: 10px; /* Respecto a la ventana de visualización */
  right: 10px; /* Respecto a la ventana de visualización */
  width: 70px;
  height: 70px;
  background-color: lightsalmon;
}

.sticky-header {
  position: sticky;
  top: 0; /* Se adhiere a la parte superior del viewport */
  height: 50px;
  background-color: lightgoldenrodyellow;
  z-index: 10; /* Para superponer otros elementos al adherirse */
}

¿Cuál es la diferencia entre los diferentes métodos de posicionamiento de elementos en CSS?