Guida CSS interattiva: Position

Q: Come posiziono un elemento in modo assoluto rispetto al genitore?

Dai al genitore position: relative; e al figlio position: absolute; con offset come top: 0; right: 0;. Senza un genitore posizionato, il figlio viene posizionato rispetto alla pagina.

Q: Qual è la differenza tra position relative e absolute?

relative mantiene l'elemento nel flusso e sposta solo il punto in cui viene disegnato, lasciando libero il suo spazio originale. absolute lo toglie dal flusso e lo posiziona rispetto al suo antenato posizionato.

Q: Perché position: sticky non funziona?

Di solito per uno di tre motivi: non è impostato top (o un altro offset), un antenato ha overflow: hidden o auto e diventa il contenitore di scorrimento, oppure il genitore dell'elemento sticky non è più alto dell'elemento, quindi non c'è spazio per attaccarsi.

Q: Qual è la differenza tra fixed e sticky?

fixed viene tolto dal flusso e fissato al viewport (a meno che un antenato abbia un transform o un filter). sticky resta nel flusso e scorre normalmente finché non raggiunge il suo offset, poi resta attaccato finché il suo genitore è ancora sullo schermo.

position: absolute in un esempio

Un elemento posizionato in modo assoluto viene sollevato dal flusso normale e posizionato con top, right, bottom e left. Quegli offset si misurano dall'antenato più vicino che ha un position diverso da static, ed è per questo che il genitore riceve position: relative:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute inside relative</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card {
      position: relative;          /* the reference box */
      width: 260px; padding: 20px;
      background: #f3f4f6; border: 2px solid #111827;
    }
    .badge {
      position: absolute;
      top: 8px;
      right: 8px;
      padding: 2px 8px;
      background: #dc2626; color: white; font-size: 12px; border-radius: 999px;
    }
  </style>
</head>
<body>
  <div class="card" id="card">
    <span class="badge" id="badge">New</span>
    <h3>Card title</h3>
    <p>The badge sits 8px from the top and right edges of the card.</p>
  </div>
</body>
</html>

Cancella position: relative da .card e il badge salta in alto a destra dell'intera pagina, perché non ha più un antenato posizionato. Questa sola riga spiega la maggior parte delle domande del tipo "position absolute non funziona".

Cose da sapere sugli elementi absolute:

Non occupano spazio. Il titolo e il paragrafo vengono disposti come se il badge non esistesse.
La loro larghezza si restringe al contenuto, a meno che tu non imposti width oppure sia left sia right.
Gli offset si misurano fino al bordo del padding del blocco contenitore, dentro il suo bordo.

I cinque valori di position

Valore	Nel flusso?	Offset misurati da	Uso tipico
`static` (predefinito)	Sì	Gli offset vengono ignorati	Elementi normali
`relative`	Sì, il suo spazio resta	La sua posizione normale	Riferimento per figli absolute, piccoli spostamenti
`absolute`	No	Antenato posizionato più vicino (o la pagina)	Badge, tooltip, sovrapposizioni, pulsanti di chiusura
`fixed`	No	Il viewport	Header, pulsanti della chat, barre dei cookie
`sticky`	Sì	Il suo contenitore di scorrimento, una volta raggiunto l'offset	Intestazioni di tabelle, titoli di sezione, barre laterali

position: relative

Un elemento posizionato in modo relativo resta dov'era nel flusso. Gli offset spostano il punto in cui viene disegnato, ma il suo spazio originale resta riservato, quindi niente intorno si sposta:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Relative</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; }
    .row div { width: 80px; padding: 16px 0; text-align: center; background: #bfdbfe; border: 2px solid #2563eb; }
    .row .moved {
      position: relative;
      top: 20px;
      left: 20px;
      background: #fde68a; border-color: #f59e0b;
    }
  </style>
</head>
<body>
  <div class="row">
    <div>1</div>
    <div class="moved" id="moved">2</div>
    <div id="three">3</div>
  </div>
</body>
</html>

Il riquadro 2 viene disegnato 20px più in basso e 20px più a destra, sovrapponendosi al riquadro 3, ma il riquadro 3 non si è mosso: lascia ancora spazio al riquadro 2 nella sua posizione originale. Da solo relative si usa raramente per spostare le cose; il suo compito principale è fare da riquadro di riferimento per i figli absolute.

Offset e inset

top, right, bottom e left accettano lunghezze, percentuali (del blocco contenitore) e auto. La forma abbreviata inset li imposta tutti e quattro nello stesso ordine di margin:

.overlay {
  position: absolute;
  inset: 0;              /* top: 0; right: 0; bottom: 0; left: 0; */
}
.corner {
  position: absolute;
  inset: auto 16px 16px auto;  /* bottom right corner, 16px in */
}

Impostare lati opposti allarga l'elemento: left: 0; right: 0 lo rende largo quanto il blocco contenitore. inset: 0 su un figlio absolute è il modo standard per coprire una card con una sovrapposizione.

Centrare con absolute e transform

top: 50%; left: 50% mette l'angolo in alto a sinistra dell'elemento al centro. translate(-50%, -50%) poi lo riporta indietro di metà della sua dimensione:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute centering</title>
  <style>
    .stage { position: relative; height: 180px; background: #e5e7eb; }
    .center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 12px 20px;
      background: #2563eb; color: white; font-family: system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <div class="stage" id="stage"><div class="center" id="c">Centered</div></div>
</body>
</html>

Flexbox e grid centrano in modo più semplice quando l'elemento può restare nel flusso; la pagina su come centrare un div confronta tutti i metodi.

position: fixed

Un elemento fixed viene posizionato rispetto al viewport e resta lì mentre la pagina scorre:

.chat-button {
  position: fixed;
  bottom: 16px;
  right: 16px;
}

Due insidie. Un elemento fixed non occupa spazio, quindi un header fixed copre la parte alta della pagina a meno che tu non aggiunga padding-top al body. E se un antenato ha un transform, un filter o una perspective, quell'antenato diventa il riquadro di riferimento al posto del viewport, quindi l'elemento scorre insieme a lui.

position: sticky

Un elemento sticky scorre normalmente finché non raggiunge il suo offset, poi resta attaccato lì finché la fine del suo genitore non scorre via. Fai scorrere il riquadro qui sotto:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .scroller { height: 220px; overflow-y: auto; border: 2px solid #111827; }
    h3 {
      position: sticky;
      top: 0;
      margin: 0; padding: 8px 12px;
      background: #2563eb; color: white;
    }
    p { margin: 0; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="scroller" id="scroller">
    <section>
      <h3>A</h3>
      <p>Adams</p><p>Allen</p><p>Alvarez</p><p>Anderson</p><p>Arnold</p>
    </section>
    <section>
      <h3>B</h3>
      <p>Baker</p><p>Bell</p><p>Brooks</p><p>Brown</p><p>Bryant</p>
    </section>
    <section>
      <h3>C</h3>
      <p>Campbell</p><p>Carter</p><p>Clark</p><p>Collins</p><p>Cooper</p>
    </section>
  </div>
</body>
</html>

Ogni lettera resta attaccata in cima al riquadro di scorrimento mentre la sua sezione è visibile, poi viene spinta via dalla successiva, perché un elemento sticky non esce mai dal suo genitore.

Quando sticky non si attacca, controlla questi punti:

Nessun offset. position: sticky non fa niente senza top, bottom, left o right.
Un antenato con overflow: hidden, auto o scroll. Diventa il contenitore di scorrimento, e se in realtà non scorre, non si attacca niente. Usa overflow: clip se ti serve solo nascondere ciò che trabocca.
Un genitore non più alto dell'elemento sticky. Al suo interno non c'è spazio per attaccarsi.
Un genitore flex o grid che lo allunga. In una riga flex, aggiungi align-self: flex-start alla barra laterale sticky.

Errori comuni

Dimenticare position: relative sul genitore di un elemento absolute.
Usare absolute per il layout della pagina. Gli elementi absolute si ignorano tra loro e ignorano il contenuto, quindi sugli schermi più piccoli il testo si sovrappone. Usa flexbox o grid per il layout e absolute per piccole decorazioni.
Offset su un elemento static. top: 10px non fa niente senza un position.
Litigare su quale elemento sta sopra. Gli elementi posizionati che si sovrappongono vengono ordinati da z-index.
Un header fixed che nasconde il contenuto. Aggiungi padding alla pagina, oppure scroll-padding-top perché i link alle ancore finiscano sotto l'header.

Domande frequenti

Cosa fa position: absolute?

Toglie l'elemento dal flusso normale (gli altri elementi si comportano come se non ci fosse) e lo posiziona con top, right, bottom e left, misurati dal suo blocco contenitore: l'antenato più vicino il cui position non è static.

Come posiziono un elemento in modo assoluto rispetto al genitore?

Dai al genitore position: relative; e al figlio position: absolute; con offset come top: 0; right: 0;. Senza un genitore posizionato, il figlio viene posizionato rispetto alla pagina.

Qual è la differenza tra position relative e absolute?

relative mantiene l'elemento nel flusso e sposta solo il punto in cui viene disegnato, lasciando libero il suo spazio originale. absolute lo toglie dal flusso e lo posiziona rispetto al suo antenato posizionato.

Perché position: sticky non funziona?

Di solito per uno di tre motivi: non è impostato top (o un altro offset), un antenato ha overflow: hidden o auto e diventa il contenitore di scorrimento, oppure il genitore dell'elemento sticky non è più alto dell'elemento, quindi non c'è spazio per attaccarsi.

Qual è la differenza tra fixed e sticky?

fixed viene tolto dal flusso e fissato al viewport (a meno che un antenato abbia un transform o un filter). sticky resta nel flusso e scorre normalmente finché non raggiunge il suo offset, poi resta attaccato finché il suo genitore è ancora sullo schermo.

Concetti correlati