Qual é a diferença entre os diferentes métodos de…

static - Posição padrão. O elemento é posicionado de acordo com o fluxo normal do documento. As propriedades top, right, bottom, left não têm efeito.
relative - O elemento é posicionado relativamente à sua posição normal no fluxo. As propriedades top, right, bottom, left deslocam o elemento a partir da sua posição original, mas o espaço que ocupa no fluxo é mantido.
absolute - O elemento é completamente removido do fluxo normal do documento. A sua posição é determinada pelas propriedades top, right, bottom, left relativamente ao ancestral posicionado mais próximo (com position: relative, absolute, fixed ou sticky). Se não houver tais ancestrais, a posição é relativa ao bloco inicial <html>.
fixed - O elemento é completamente removido do fluxo normal do documento. A sua posição é determinada pelas propriedades top, right, bottom, left relativamente à janela de visualização (viewport). O elemento permanece no lugar ao rolar a página.
sticky - O elemento é posicionado como relative até atingir a posição definida por top, right, bottom, left, após o que a sua posição torna-se fixed.

Tabela de diferenças:

Propriedade	`static`	`relative`	`absolute`	`fixed`	`sticky`
Fluxo do documento	Normal	Mantém	É removido	É removido	Primeiro normal, depois removido
Deslocamento (`top` etc.)	Não	Relativo a si próprio	Relativo ao ancestral/viewport	Relativo ao viewport	Relativo a si próprio, depois ao viewport
Ao rolar a página	Rola	Rola	Permanece no lugar (se o ancestral for `fixed`) ou rola com o ancestral	Permanece no lugar	Primeiro rola, depois permanece no lugar

Exemplo:

.static-box {
  position: static; /* Posição padrão */
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.relative-box {
  position: relative;
  top: 20px; /* Deslocamento para baixo a partir da posição normal */
  left: 20px; /* Deslocamento para a direita a partir da posição normal */
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

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

.absolute-box {
  position: absolute;
  top: 50px; /* Relativo ao contêiner */
  left: 50px; /* Relativo ao contêiner */
  width: 50px;
  height: 50px;
  background-color: lightcoral;
}

.fixed-box {
  position: fixed;
  bottom: 10px; /* Relativo à janela de visualização */
  right: 10px; /* Relativo à janela de visualização */
  width: 70px;
  height: 70px;
  background-color: lightsalmon;
}

.sticky-header {
  position: sticky;
  top: 0; /* Cola ao topo do viewport */
  height: 50px;
  background-color: lightgoldenrodyellow;
  z-index: 10; /* Para sobrepor outros elementos ao colar */
}

Qual é a diferença entre os diferentes métodos de posicionamento de elementos em CSS?