Posizionamento: relative, absolute, fixed, sticky

Per impostazione predefinita, gli elementi seguono il flusso normale del documento: gli elementi block si dispongono verticalmente, mentre gli elementi inline fluiscono orizzontalmente all'interno del testo. La proprietà position consente di uscire da questo flusso per creare sovrapposizioni, intestazioni fisse e tooltip.

Ogni elemento inizia con position: static. Ciò significa che viene posizionato secondo il flusso normale del documento. Le proprietà top, right, bottom e left non hanno effetto sugli elementi static.

position: relative mantiene l'elemento nel flusso normale, ma consente di spostarlo dalla posizione originale usando top, right, bottom e left. Inoltre, crea un contesto di posizionamento per i discendenti con posizionamento assoluto.

position: absolute rimuove l'elemento dal normale flusso del documento. L'elemento viene posizionato rispetto al suo antenato posizionato più vicino (qualsiasi posizione diversa da static). Se non esiste alcun antenato posizionato, viene posizionato rispetto alla viewport.

Gli elementi posizionati possono sovrapporsi. Utilizzi z-index per controllare l'ordine di sovrapposizione. Un valore di z-index più alto significa che l'elemento viene visualizzato sopra gli altri. Funziona solo sugli elementi posizionati, non su quelli static. Crea un nuovo stacking context.

position: fixed rimuove l'elemento dal normale flusso del documento e lo fissa alla viewport. Non scorre insieme alla pagina. È perfetto per intestazioni fisse, pulsanti di azione fluttuanti e banner dei cookie.

position: sticky è una soluzione ibrida: l'elemento scorre insieme alla pagina finché non raggiunge una soglia (impostata con top/bottom), quindi rimane fisso. È utile per le intestazioni delle sezioni nelle tabelle lunghe o per le barre laterali che rimangono fisse dopo l'intestazione.

Una tecnica classica consiste nel combinare position: absolute; top: 50%; left: 50% con transform: translate(-50%, -50%) per centrare perfettamente un elemento nel contenitore posizionato che lo contiene.

Per impostazione predefinita, un elemento figlio posizionato in modo assoluto può oltrepassare i limiti del genitore. Aggiungendo overflow: hidden al genitore, viene ritagliato tutto ciò che si trova al di fuori del suo riquadro — utile per gli effetti sulle immagini delle schede e per ritagliare i badge.

Alcune proprietà creano involontariamente dei contesti di stacking: transform, filter, isolation: isolate. Questo può causare conflitti di z-index: un elemento con z-index: 9999 può trovarsi comunque dietro a un altro perché si trova all'interno di un contesto di stacking inferiore.

relative: per gli spostamenti e come contesto di posizionamento. absolute: per badge, tooltip e sovrapposizioni rispetto a un genitore. fixed: per intestazioni persistenti, modali e toast. sticky: per intestazioni di sezioni e navigazione laterale che segue lo scorrimento. Eviti position per i layout — utilizzi Flex o Grid.

Un elemento ha position: absolute; top: 0; right: 0;. Dove apparirà se il suo genitore ha position: relative?

static è il valore predefinito. relative sposta l'elemento senza rimuoverlo dal flusso e crea un contesto di posizionamento. absolute rimuove l'elemento dal flusso e lo posiziona rispetto all'antenato posizionato più vicino. fixed mantiene l'elemento fisso rispetto alla viewport. sticky fa scorrere l'elemento e poi lo mantiene fisso. Utilizzi z-index per controllare l'ordine di sovrapposizione.