CSS Fogli Di Stile

Proprietà Per Il Posizionamento

Stampa WhatsApp Email

Posizionamento CSS: static, relative, absolute, fixed, sticky, distanze dai lati e z-index, con esempi e risultati visivi.

Prerequisiti: classi, dimensioni, spaziature e normale flusso degli elementi.

Le proprietà CSS per il posizionamento

Normalmente gli elementi partecipano al flusso della pagina: un blocco viene dopo quello precedente e gli elementi in linea seguono le righe di testo. Position permette di modificare questo comportamento per esigenze come etichette sovrapposte, pulsanti fissi e intestazioni che rimangono visibili durante lo scorrimento.

Per organizzare intere pagine, menu e gruppi di schede, Flexbox e Grid sono spesso più adatti. Il posizionamento assoluto è utile quando vogliamo collocare un elemento rispetto a un riferimento preciso, tenendo conto che non riserva spazio nel flusso.

Come leggere le anteprime

Il contenitore giallo ha dimensioni definite e position: relative. Il riquadro blu è l’elemento da posizionare; quello verde mostra dove finisce l’elemento successivo. Ogni anteprima è isolata dagli stili del sito.

1. I valori principali di position

Position determina il metodo di posizionamento. Le distanze top, right, bottom e left hanno significati diversi in base al metodo scelto.

1. I valori principali di position: esempi e risultati
Proprietà o valoreDescrizioneEsempio HTML e CSSRisultato
position: staticÈ il valore iniziale. L’elemento segue il normale flusso; le proprietà di distanza dai lati non lo spostano.HTML
<div class="contenitore">
    <div class="riquadro">Elemento da posizionare</div>
    <div class="successivo">Elemento successivo</div>
</div>
CSS
.contenitore {
    position: relative;
    width: 280px;
    height: 180px;
    box-sizing: border-box;
    border: 2px dashed #b76b00;
    background-color: #fff0d1;
}

.riquadro {
    width: 150px;
    box-sizing: border-box;
    padding: 12px;
    border: 2px solid #17365d;
    background-color: #dceeff;
    color: #17365d;
}

.successivo {
    padding: 8px;
    border: 1px solid #357c62;
    background-color: #dff0e5;
}

.riquadro {
    position: static;
    top: 20px;
    left: 30px;
}

Top e left non hanno effetto. Il secondo elemento rimane sotto il primo.

position: relativeMantiene il proprio spazio nel flusso. Le distanze spostano la rappresentazione dell’elemento rispetto alla posizione normale, senza spostare il posto riservato agli elementi successivi.HTML
<div class="contenitore">
    <div class="riquadro">Elemento da posizionare</div>
    <div class="successivo">Elemento successivo</div>
</div>
CSS
.contenitore {
    position: relative;
    width: 280px;
    height: 180px;
    box-sizing: border-box;
    border: 2px dashed #b76b00;
    background-color: #fff0d1;
}

.riquadro {
    width: 150px;
    box-sizing: border-box;
    padding: 12px;
    border: 2px solid #17365d;
    background-color: #dceeff;
    color: #17365d;
}

.successivo {
    padding: 8px;
    border: 1px solid #357c62;
    background-color: #dff0e5;
}

.riquadro {
    position: relative;
    top: 20px;
    left: 30px;
}

Il riquadro si sposta in basso e a destra. Il successivo resta nella posizione originaria e può essere coperto.

position: absoluteRimuove l’elemento dal normale flusso. In questo esempio il riferimento è il contenitore con position: relative.HTML
<div class="contenitore">
    <div class="riquadro">Elemento da posizionare</div>
    <div class="successivo">Elemento successivo</div>
</div>
CSS
.contenitore {
    position: relative;
    width: 280px;
    height: 180px;
    box-sizing: border-box;
    border: 2px dashed #b76b00;
    background-color: #fff0d1;
}

.riquadro {
    width: 150px;
    box-sizing: border-box;
    padding: 12px;
    border: 2px solid #17365d;
    background-color: #dceeff;
    color: #17365d;
}

.successivo {
    padding: 8px;
    border: 1px solid #357c62;
    background-color: #dff0e5;
}

.riquadro {
    position: absolute;
    top: 20px;
    left: 30px;
}

Il riquadro è posizionato rispetto al contenitore. L’elemento successivo non conserva uno spazio per il riquadro e parte dall’alto.

2. Distanze dai lati e proprietà abbreviata

Questi esempi usano position: absolute dentro un contenitore posizionato. Le distanze si misurano dal relativo blocco di riferimento; non sono margini.

2. Distanze dai lati e proprietà abbreviata: esempi e risultati
Proprietà o valoreDescrizioneEsempio HTML e CSSRisultato
top e leftImpostano la distanza dal lato superiore e da quello sinistro.HTML
<div class="contenitore">
    <div class="riquadro">Elemento da posizionare</div>
    <div class="successivo">Elemento successivo</div>
</div>
CSS
.contenitore {
    position: relative;
    width: 280px;
    height: 180px;
    box-sizing: border-box;
    border: 2px dashed #b76b00;
    background-color: #fff0d1;
}

.riquadro {
    width: 150px;
    box-sizing: border-box;
    padding: 12px;
    border: 2px solid #17365d;
    background-color: #dceeff;
    color: #17365d;
}

.successivo {
    padding: 8px;
    border: 1px solid #357c62;
    background-color: #dff0e5;
}

.riquadro {
    position: absolute;
    top: 15px;
    left: 20px;
}

Il riquadro è vicino all’angolo superiore sinistro, con le distanze indicate.

bottom e rightImpostano la distanza dal lato inferiore e da quello destro.HTML
<div class="contenitore">
    <div class="riquadro">Elemento da posizionare</div>
    <div class="successivo">Elemento successivo</div>
</div>
CSS
.contenitore {
    position: relative;
    width: 280px;
    height: 180px;
    box-sizing: border-box;
    border: 2px dashed #b76b00;
    background-color: #fff0d1;
}

.riquadro {
    width: 150px;
    box-sizing: border-box;
    padding: 12px;
    border: 2px solid #17365d;
    background-color: #dceeff;
    color: #17365d;
}

.successivo {
    padding: 8px;
    border: 1px solid #357c62;
    background-color: #dff0e5;
}

.riquadro {
    position: absolute;
    bottom: 15px;
    right: 20px;
}

Il riquadro è vicino all’angolo inferiore destro.

insetAbbrevia top, right, bottom e left. Con un valore assegna la stessa distanza ai quattro lati. Con quattro valori segue l’ordine alto, destra, basso, sinistra.HTML
<div class="contenitore">
    <div class="riquadro">Elemento da posizionare</div>
    <div class="successivo">Elemento successivo</div>
</div>
CSS
.contenitore {
    position: relative;
    width: 280px;
    height: 180px;
    box-sizing: border-box;
    border: 2px dashed #b76b00;
    background-color: #fff0d1;
}

.riquadro {
    width: 150px;
    box-sizing: border-box;
    padding: 12px;
    border: 2px solid #17365d;
    background-color: #dceeff;
    color: #17365d;
}

.successivo {
    padding: 8px;
    border: 1px solid #357c62;
    background-color: #dff0e5;
}

.riquadro {
    position: absolute;
    width: auto;
    inset: 15px;
}

La larghezza e l’altezza automatiche permettono al riquadro di estendersi tra i quattro lati, lasciando 15 pixel lungo ciascuno.

left e right insiemeCon posizione assoluta e larghezza automatica, le due distanze possono determinare la larghezza disponibile.HTML
<div class="contenitore">
    <div class="riquadro">Elemento da posizionare</div>
    <div class="successivo">Elemento successivo</div>
</div>
CSS
.contenitore {
    position: relative;
    width: 280px;
    height: 180px;
    box-sizing: border-box;
    border: 2px dashed #b76b00;
    background-color: #fff0d1;
}

.riquadro {
    width: 150px;
    box-sizing: border-box;
    padding: 12px;
    border: 2px solid #17365d;
    background-color: #dceeff;
    color: #17365d;
}

.successivo {
    padding: 8px;
    border: 1px solid #357c62;
    background-color: #dff0e5;
}

.riquadro {
    position: absolute;
    width: auto;
    left: 20px;
    right: 20px;
    top: 60px;
}

Il riquadro si estende tra i due limiti laterali, senza impostare una larghezza fissa.

Distanze in percentualeNel posizionamento assoluto, left e right sono riferiti alla larghezza del blocco di riferimento; top e bottom alla sua altezza.HTML
<div class="contenitore">
    <div class="riquadro">Elemento da posizionare</div>
    <div class="successivo">Elemento successivo</div>
</div>
CSS
.contenitore {
    position: relative;
    width: 280px;
    height: 180px;
    box-sizing: border-box;
    border: 2px dashed #b76b00;
    background-color: #fff0d1;
}

.riquadro {
    width: 150px;
    box-sizing: border-box;
    padding: 12px;
    border: 2px solid #17365d;
    background-color: #dceeff;
    color: #17365d;
}

.successivo {
    padding: 8px;
    border: 1px solid #357c62;
    background-color: #dff0e5;
}

.riquadro {
    position: absolute;
    top: 50%;
    left: 50%;
}

Il bordo superiore sinistro del riquadro è a metà larghezza e altezza del riferimento. Questo, da solo, non centra l’intero riquadro.

Qual è il blocco di riferimento?

Per un elemento absolute, il riferimento è comunemente il più vicino antenato con position diverso da static. In mancanza di un riferimento di questo tipo o di altri antenati che lo stabiliscono, si usa il blocco contenitore iniziale. Alcune altre proprietà, per esempio transform, possono creare un riferimento anche senza position: relative.

Il riferimento non è necessariamente il genitore immediato. Per evitare ambiguità, negli esempi assegnamo position: relative al contenitore in cui vogliamo collocare l’elemento. Non è necessario spostare il contenitore con top o left.

3. Position: fixed

Un elemento fixed è rimosso dal normale flusso e, normalmente, è posizionato rispetto alla finestra di visualizzazione. Rimane nella stessa posizione mentre la pagina scorre. Nell’anteprima la finestra di riferimento è quella dell’iframe, non l’intera pagina della lezione.

HTML

<div class="pagina">
    <h2>Scorri questa anteprima</h2>
    <p>Il cartellino rimane nell’angolo della finestra.</p>
</div>
<div class="cartellino">Elemento fisso</div>

CSS

.pagina {
    min-height: 800px;
    background: linear-gradient(#fff0d1, #dceeff);
}

.cartellino {
    position: fixed;
    right: 12px;
    bottom: 12px;
    padding: 12px;
    border: 2px solid #17365d;
    background-color: #dceeff;
}

Risultato

Scorri dentro l’anteprima: il cartellino resta in basso a destra. Un antenato con proprietà come transform può cambiare il blocco di riferimento di un elemento fixed. Verifica anche che elementi fissi non coprano contenuti o controlli importanti.

4. Position: sticky

Un elemento sticky mantiene il proprio spazio nel flusso. Quando lo scorrimento raggiunge la soglia impostata, rimane vicino al lato indicato, entro i limiti del suo contenitore. In questo esempio il riferimento per lo scorrimento è un div con overflow: auto.

HTML

<div class="scorrevole">
    <div class="introduzione">Scorri per raggiungere l’intestazione.</div>
    <div class="titolo">Intestazione sticky</div>
    <div class="contenuto">Il contenuto continua più in basso.</div>
</div>

CSS

.scorrevole {
    height: 220px;
    overflow: auto;
    border: 2px solid #17365d;
    background-color: #fff0d1;
}

.introduzione {
    padding: 15px;
    height: 70px;
}

.titolo {
    position: sticky;
    top: 0;
    padding: 12px;
    background-color: #17365d;
    color: white;
    z-index: 1;
}

.contenuto {
    height: 500px;
    padding: 15px;
}

Risultato

Il titolo inizialmente segue il contenuto. Dopo aver raggiunto il bordo superiore dell’area scorrevole, rimane visibile mentre scorri. Per attivare il vincolo serve una distanza non auto sul relativo asse: qui top: 0.

Se sticky non si muove come previsto: controlla quale antenato crea l’area di scorrimento, le proprietà overflow, lo spazio disponibile e l’altezza del contenitore. Un elemento alto quanto il proprio contenitore potrebbe non avere spazio per lo spostamento.

5. Sovrapposizione: z-index

Z-index controlla l’ordine di sovrapposizione nei contesti in cui si applica, tra cui gli elementi posizionati e i figli flex o grid. Accetta interi, anche negativi, e auto. Non è una misura in pixel.

HTML

<div class="area"><div class="blu">Blu: z-index 1</div><div class="verde">Verde: z-index 2</div></div>

CSS

.area {
    position: relative;
    width: 280px;
    height: 180px;
    background-color: #fff0d1;
}

.blu, .verde {
    position: absolute;
    width: 150px;
    height: 100px;
    box-sizing: border-box;
    padding: 12px;
    border: 2px solid #17365d;
}

.blu {
    top: 15px;
    left: 15px;
    background-color: #dceeff;
    z-index: 1;
}

.verde {
    top: 60px;
    left: 90px;
    background-color: #dff0e5;
    z-index: 2;
}

Risultato

Il verde copre la parte del blu con cui si sovrappone perché i due elementi sono confrontabili nello stesso contesto e il verde ha z-index maggiore.

I contesti di sovrapposizione

La pagina può contenere gruppi di sovrapposizione separati, chiamati stacking context. Un figlio con z-index molto alto non può semplicemente superare un elemento esterno a un contesto che, nel complesso, viene disegnato più in alto.

Tra le condizioni che creano un contesto ci sono position: relative o absolute con z-index diverso da auto, position: fixed o sticky, opacity minore di 1, transform diverso da none e isolation: isolate. L’elenco non è completo, ma mostra perché aumentare z-index senza controllare gli antenati può non risolvere il problema.

6. Esempio completo: un’etichetta su una scheda

La scheda rimane nel normale flusso ed è il riferimento dell’etichetta assoluta. Il padding superiore riserva spazio al testo, perché l’etichetta non lo fa automaticamente.

HTML

<article class="scheda">
    <span class="etichetta">Novità</span>
    <h2>Imparare il CSS</h2>
    <p>Un’etichetta evidenzia questa scheda.</p>
</article>

CSS

.scheda {
    position: relative;
    margin: 15px;
    padding: 45px 20px 20px;
    border: 2px solid #17365d;
    border-radius: 10px;
    background-color: #eef5ff;
}

.etichetta {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    border-radius: 6px;
    background-color: #17365d;
    color: white;
}

Risultato

Centrare un elemento assoluto

Top: 50% e left: 50% portano l’angolo del riquadro al centro del riferimento. Con translate possiamo correggere lo spostamento in base alle dimensioni del riquadro stesso:

.contenitore {
    position: relative;
    height: 250px;
}

.riquadro {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Le percentuali di translate sono riferite alla dimensione del riquadro trasformato, mentre quelle di top e left al blocco di riferimento. Per una semplice centratura nel layout, Flexbox o Grid possono offrire una soluzione più diretta senza rimuovere l’elemento dal flusso.

Proprietà logiche di distanza

Inset-inline-start, inset-inline-end, inset-block-start e inset-block-end seguono la direzione di scrittura. Nella scrittura orizzontale italiana da sinistra a destra corrispondono rispettivamente a left, right, top e bottom. Esistono anche le abbreviazioni inset-inline e inset-block.

Confronto tra i metodi di posizionamento
ValoreConserva spazio nel flusso?Riferimento principale
staticSì.Il normale layout; le distanze non si applicano.
relativeSì.La propria posizione normale.
absoluteNo.Il blocco contenitore stabilito dagli antenati.
fixedNo.Normalmente il viewport; alcuni antenati possono cambiarlo.
stickySì.La zona di scorrimento e i limiti del contenitore.

Problemi frequenti

  • Top e left non spostano l’elemento: controlla che position non sia static.
  • Absolute si posiziona nel punto sbagliato: individua il blocco di riferimento e assegna position: relative al contenitore appropriato.
  • Il contenuto successivo finisce sotto l’elemento: absolute e fixed non riservano spazio. Prevedi una struttura o una spaziatura adatta.
  • Il contenitore perde altezza: se tutti i figli sono assoluti, non contribuiscono alla sua altezza automatica.
  • Z-index non risolve la sovrapposizione: controlla i contesti creati dagli antenati. Un valore più grande non supera tutti gli altri elementi della pagina.
  • L’elemento viene tagliato: controlla i limiti di ritaglio e overflow dei contenitori; z-index non annulla il ritaglio.
  • Su schermi piccoli un elemento fisso copre il testo: verifica il layout a diverse dimensioni e con caratteri ingranditi.