Posizionamento Assoluto

Prerequisiti: Posizionamento relativo.

position: static è il comportamento normale e non usa gli offset di posizionamento nel modo delle scatole posizionate. relative conserva lo spazio originale nel flusso e consente di spostare visivamente l’elemento. absolute viene tolto dal flusso: gli altri elementi non riservano automaticamente il suo spazio. Nel caso semplice qui studiato, un antenato con position: relative fornisce il riferimento per l’elemento absolute. Altre proprietà, come alcune trasformazioni, possono anch’esse creare un contenitore di riferimento.

fixed usa normalmente il viewport come riferimento, ma alcuni antenati possono cambiare questo comportamento. Un elemento fisso può coprire contenuti quando la finestra è piccola. sticky conserva il proprio posto nel flusso e può aderire a un bordo del suo contenitore di scorrimento dopo una soglia, per esempio top: 0. Per osservarlo servono spazio di scorrimento e un contesto adatto; overflow degli antenati può cambiare quale contenitore è rilevante.

z-index controlla l’ordine di impilamento nei contesti pertinenti. Può applicarsi agli elementi posizionati e, in condizioni previste, anche ai flex e grid item. Un valore enorme non permette a un figlio di uscire dal contesto di impilamento del genitore. Proprietà come transform e opacity inferiore a 1 possono creare nuovi contesti. Prima di aumentare z-index cerca quali antenati definiscano questi confini.

Esempio con stile esterno. Il documento index.html collega il file stile.css mediante il tag link nella head.

<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Posizionamento assoluto</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<article class="scheda">
<span class="etichetta">Novità</span>
<h1>Corso CSS</h1>
<p>Un’etichetta collocata dentro la scheda.</p>
</article>
</body>
</html>

.scheda {
  position: relative;
  padding: 3rem 1rem 1rem;
  border: 1px solid #174a7e;
}
.etichetta {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.5rem;
  background-color: #eef4fa;
}

La scheda fornisce il riferimento. L’etichetta non occupa una riga nel flusso: il padding superiore riserva intenzionalmente spazio per evitare che copra il titolo.

.etichetta {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  right: auto;
}

Seleziona una domanda per visualizzare la risposta e confrontarla con la tua.

Riferimento tecnico: MDN — riferimento CSS. Cerca le proprietà o i selettori utilizzati nell’esempio.