Qual è la differenza tra i diversi metodi di…

static - Posizione di default. L'elemento viene posizionato secondo il flusso normale del documento. Le proprietà top, right, bottom, left non hanno effetto.
relative - L'elemento viene posizionato rispetto alla sua posizione normale nel flusso. Le proprietà top, right, bottom, left spostano l'elemento dalla sua posizione originale, ma lo spazio che occupa nel flusso viene mantenuto.
absolute - L'elemento viene completamente rimosso dal flusso normale del documento. La sua posizione è determinata dalle proprietà top, right, bottom, left rispetto all'antenato più vicino posizionato (con position: relative, absolute, fixed o sticky). Se non ci sono tali antenati, la posizione è relativa al blocco iniziale <html>.
fixed - L'elemento viene completamente rimosso dal flusso normale del documento. La sua posizione è determinata dalle proprietà top, right, bottom, left rispetto alla finestra di visualizzazione (viewport). L'elemento rimane fisso durante lo scorrimento della pagina.
sticky - L'elemento viene posizionato come relative fino a quando, durante lo scorrimento, non raggiunge la posizione impostata da top, right, bottom, left, dopodiché la sua posizione diventa fixed.

Tabella delle differenze:

Proprietà	`static`	`relative`	`absolute`	`fixed`	`sticky`
Flusso del documento	Normale	Mantiene	Viene rimosso	Viene rimosso	Prima normale, poi rimosso
Spostamento (`top` etc.)	No	Rispetto a sé stesso	Rispetto all'antenato/viewport	Rispetto al viewport	Rispetto a sé stesso, poi al viewport
Durante lo scorrimento	Scorre	Scorre	Resta in posizione (se l'antenato è `fixed`) o scorre con l'antenato	Resta in posizione	Prima scorre, poi rimane in posizione

Esempio:

.static-box {
  position: static; /* Posizione di default */
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.relative-box {
  position: relative;
  top: 20px; /* Spostamento verso il basso dalla posizione normale */
  left: 20px; /* Spostamento verso destra dalla posizione normale */
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

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

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

.fixed-box {
  position: fixed;
  bottom: 10px; /* Rispetto alla finestra di visualizzazione */
  right: 10px; /* Rispetto alla finestra di visualizzazione */
  width: 70px;
  height: 70px;
  background-color: lightsalmon;
}

.sticky-header {
  position: sticky;
  top: 0; /* Si attacca alla parte superiore del viewport */
  height: 50px;
  background-color: lightgoldenrodyellow;
  z-index: 10; /* Per sovrapporre altri elementi durante l'adesione */
}

Qual è la differenza tra i diversi metodi di posizionamento degli elementi in CSS?