Posizione - Trucchi CSS | CSS Almanac 2025

La positionproprietà può aiutarti a manipolare la posizione di un elemento, ad esempio:

.element ( position: relative; top: 20px; )

Rispetto alla sua posizione originale, l'elemento sopra verrà ora spostato dall'alto di 20 px. Se dovessimo animare queste proprietà, possiamo vedere quanto controllo ci dà (anche se non è una buona idea per motivi di prestazioni):

relativeè solo uno dei sei valori per la positionproprietà. Ecco gli altri:

Valori

static: ogni elemento ha una posizione statica per impostazione predefinita, quindi l'elemento rimarrà nel normale flusso di pagina. Quindi, se è presente un set sinistra / destra / alto / basso / z-index, non ci sarà alcun effetto su quell'elemento.
relative: la posizione originale di un elemento rimane nel flusso del documento, proprio come il staticvalore. Ma ora sinistra / destra / alto / basso / z-index funzionerà. Le proprietà posizionali "spingono" l'elemento dalla posizione originale in quella direzione.
absolute: l'elemento viene rimosso dal flusso del documento e gli altri elementi si comporteranno come se non fosse nemmeno lì mentre tutte le altre proprietà posizionali lavoreranno su di esso.
fixed: l'elemento viene rimosso dal flusso del documento come gli elementi posizionati in modo assoluto. In effetti si comportano quasi allo stesso modo, solo gli elementi posizionati fissi sono sempre relativi al documento, non un genitore in particolare, e non sono influenzati dallo scorrimento.
sticky(sperimentale): l'elemento viene trattato come un relativevalore fino a quando la posizione di scorrimento del viewport non raggiunge una soglia specificata, a quel punto l'elemento prende una fixedposizione in cui gli viene detto di restare.
inherit: il positionvalore non viene applicato a cascata, quindi questo può essere utilizzato per forzarlo in modo specifico e inheritil valore di posizionamento dal suo genitore.

Assoluto

Se un elemento figlio ha un absolutevalore, l'elemento genitore si comporterà come se il figlio non fosse affatto presente:

.element ( position: absolute; )

E quando proviamo a impostare altri valori come left, bottome rightscopriremo che l'elemento figlio non risponde alle dimensioni del suo genitore, ma al documento:

.element ( position: absolute; left: 0; right: 0; bottom: 0; )

Per rendere l'elemento figlio posizionato in modo assoluto dal suo elemento genitore, dobbiamo impostarlo sull'elemento genitore stesso:

.parent ( position: relative; )

Ora proprietà quali left, right, bottome topfarà riferimento all'elemento genitore, in modo che se facciamo l'elemento figlio trasparente possiamo vederlo seduto a destra in fondo del genitore:

Fisso

Il fixedvalore è simile a absolutepoiché può aiutarti a posizionare un elemento ovunque rispetto al documento, tuttavia questo valore non viene influenzato dallo scorrimento. Guarda l'elemento figlio nella demo qui sotto e come, una volta che lo scorri, continua a rimanere in fondo alla pagina:

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.

Desktop

Cromo	Firefox	IE	Bordo	Safari
4	2	7	12	3.1

Mobile / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	3	8

Appiccicoso

Il stickyvalore è come un compromesso tra i valori relativee fixed. Al momento della stesura di questo documento, è attualmente un valore sperimentale, il che significa che non fa parte delle specifiche ufficiali e solo parzialmente adottato da browser selezionati. In altre parole, probabilmente non è la migliore idea utilizzarlo su un sito Web di produzione live.

Che cosa fa? Bene, ti consente di posizionare un elemento rispetto a qualsiasi cosa nel documento e quindi, una volta che un utente ha fatto scorrere oltre un certo punto nel viewport, fissa la posizione dell'elemento a quella posizione in modo che rimanga visualizzato in modo persistente come un elemento con un fixedvalore.

Prendiamo il seguente esempio:

.element ( position: sticky; top: 50px; )

L'elemento sarà relativamente posizionato fino a quando la posizione di scorrimento della vista non raggiunge un punto in cui l'elemento si troverà 50pxdalla parte superiore della vista. A quel punto, l'elemento diventa appiccicoso e rimane in una fixedposizione nella parte 50pxsuperiore dello schermo.

La seguente demo illustra quel punto, in cui la navigazione in alto è il relativeposizionamento predefinito e la seconda navigazione è impostata stickynella parte superiore della visualizzazione. Si prega di notare che la demo funzionerà solo in Chrome, Safari e Opera al momento della stesura di questo documento.

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.