Posizionamento assoluto e containing block

Un elemento con posizionamento absolute viene rimosso dal flusso normale del documento. Gli altri elementi si comportano come se non esistesse. Viene posizionato rispetto al suo antenato posizionato più vicino.

Il blocco contenitore di un elemento con posizionamento absolute è l'antenato più vicino con un valore di position diverso da static. Se non ne esiste alcuno, l'elemento viene posizionato rispetto al blocco contenitore iniziale, ovvero il viewport.

Lo schema più comune consiste nell'aggiungere position: relative a un genitore per contenere i figli con posizionamento absolute.

Con il posizionamento absolute, top/right/bottom/left vengono misurati dal bordo del padding del blocco contenitore.

La tecnica classica per centrare gli elementi con posizionamento absolute:

Per impostazione predefinita, gli elementi con posizionamento absolute si adattano strettamente al contenuto, a meno che non siano impostate width/height. Non si estendono più fino a occupare l'intera larghezza del contenitore, come fanno gli elementi block.

Impostare tutti e quattro i lati su 0 estende un elemento con posizionamento absolute fino a riempire il blocco contenitore:

La proprietà inset è l'abbreviazione combinata di top, right, bottom e left:

Gli elementi con posizionamento absolute partecipano ai contesti di impilamento. Utilizzi z-index per controllare quali elementi absolute sovrapposti vengono visualizzati in primo piano.

Se dimentica di aggiungere position: relative al genitore, un figlio absolute verrà posizionato rispetto all'antenato già posizionato più vicino, spesso il viewport. Controlli sempre il blocco contenitore.

Un contenitore flex o grid non è automaticamente un elemento posizionato. Deve comunque aggiungere esplicitamente position: relative per renderlo un blocco contenitore per i figli absolute.

Dove viene posizionato un elemento absolute se nessuno dei suoi antenati ha un valore di position diverso da static?

Gli elementi con posizionamento absolute escono dal flusso del documento e vengono posizionati rispetto all'antenato più vicino che non sia static. Aggiunga sempre position: relative al genitore per controllarne il posizionamento. Utilizzi inset: 0 per estendere un elemento absolute fino a riempire il contenitore.