I top, bottom, lefte rightsono usati con la posizione per impostare il posizionamento di un elemento. Hanno effetto solo sugli elementi posizionati, che sono elementi con la positionproprietà impostata su qualcosa di diverso da static. Ad esempio: relative, absolute, fixed, o sticky.
div ( : || || auto || inherit; )Potresti usarlo, ad esempio, per spostare un'icona in posizione:
button .icon ( position: relative; top: 1px; )Oppure posiziona un elemento speciale all'interno di un contenitore.
.container ( position: relative; ) .container header ( position: absolute; top: 0; )Il valore per top, bottom, left, e rightpuò essere uno dei seguenti:
- una qualsiasi delle lunghezze valide di CSS
- una percentuale dell'altezza dell'elemento contenitore (per
topebottom) o della larghezza (perlefteright) autoinherit
L'elemento generalmente si allontana da un dato lato quando il suo valore è positivo e verso di esso quando il valore è negativo. Nell'esempio seguente, una lunghezza positiva per topsposta l'elemento verso il basso (lontano dalla parte superiore) e una lunghezza negativa per topsposta l'elemento verso l'alto (verso l'alto):
Guarda il Pen
Top: valori positivi e negativi di Matsuko Friedland (@missmatsuko)
su CodePen.
Posizione
Il posizionamento di un elemento con un valore per top, bottom, lefto rightdipende dal suo valore position. Diamo un'occhiata a cosa succede quando impostiamo lo stesso valore per topsu elementi con valori diversi per position.
static
La topproprietà non ha effetto sugli elementi non posizionati (elementi con positionset to static). Questo è il modo in cui gli elementi vengono posizionati per impostazione predefinita. È possibile utilizzare position: static;come un metodo per annullare l'effetto di topsu un elemento.
relative
Quando topè impostato su un elemento con positionimpostato su relative, l'elemento si sposterà in alto o in basso rispetto alla sua posizione originale nel documento.
Guarda il Pen
Top: relativo di Matsuko Friedland (@missmatsuko)
su CodePen.
absolute
Quando topè impostato su un elemento con positionimpostato su absolute, l'elemento si sposterà su o giù in relazione al suo antenato posizionato più vicino (o al documento, se non ci sono antenati posizionati).
In questa demo, il riquadro rosa a sinistra è posizionato 50px verso il basso dalla parte superiore della pagina perché non ha elementi predecessori posizionati. La casella rosa a destra è posizionata 50px in basso dalla parte superiore del suo genitore, perché il genitore ha un positiondi relative.
Guarda il Pen
Top: assoluto di Matsuko Friedland (@missmatsuko)
su CodePen.
fixed
Quando topè impostato su un elemento con positionimpostato su fixed, l'elemento si sposterà in alto o in basso rispetto alla visualizzazione del browser.
Vedi il Pen
Top: risolto da CSS-Tricks (@ css-tricks)
su CodePen.
A prima vista, potrebbe sembrare che non ci sia differenza tra absolutee fixed. La differenza può essere vista quando li confronti su una pagina che ha abbastanza contenuto da scorrere. Mentre scorri verso il basso, l' fixedelemento position è sempre visibile, mentre l' absoluteelemento position scorre via.
Vedi Pen
Scrolling: fixed vs. absolute da CSS-Tricks (@ css-tricks)
su CodePen.
sticky
Quando topè impostato su un elemento con positionimpostato su sticky, l'elemento si sposterà verso l'alto o verso il basso rispetto all'antenato più vicino con un riquadro di scorrimento (o il riquadro di visualizzazione, se nessun antenato ha un riquadro di scorrimento), limitato ai limiti del suo elemento contenitore.
L'impostazione topsu un stickyelemento posizionato non fa molto a meno che il suo contenitore non sia più alto di quanto non sia e tu abbia abbastanza contenuto da scorrere. Come con fixed, l'elemento rimarrà visibile durante lo scorrimento. Diversamente fixed, l'elemento cadrà fuori dalla vista una volta raggiunto i bordi del suo elemento contenitore.
Vedi Pen
Scrolling: fixed vs. sticky di CSS-Tricks (@ css-tricks)
su CodePen.
Trabocchetti
Impostazione lati opposti
È possibile impostare un valore per ciascuno dei top, bottom, left, e rightsu un singolo elemento. Quando imposti i valori per i lati opposti ( tope bottom, o lefte right), il risultato potrebbe non essere sempre quello che ti aspetti.
Nella maggior parte dei casi, bottomviene ignorato se topè già impostato e rightviene ignorato se leftè già impostato. Quando la direzione è impostata su rtl(da destra a sinistra), leftviene ignorata invece di right. Affinché ogni valore abbia un effetto, l'elemento deve avere un positionset su absoluteo fixede heightimpostato su auto(predefinito).
In questo esempio, abbiamo impostato top, bottom, left, e rightper `20px`, e aspettiamo che ogni lato della scatola interna essere 20px lontano dai lati della scatola esterna:
Vedi le
impostazioni della penna in alto, in basso, a sinistra ea destra di CSS-Tricks (@ css-tricks)
su CodePen.
Quando fisso non è relativo al viewport
Gli elementi positionimpostati su fixednon sono sempre posizionati rispetto alla finestra. Sarà posizionato rispetto al suo più vicino antenato con transform, perspectiveo filterinsieme di proprietà a qualcosa di diverso none, se presente.
Aggiunta o rimozione di spazio
Se hai posizionato un elemento e hai scoperto che ora c'è uno spazio vuoto o non abbastanza spazio dove ti aspettavi, potrebbe avere a che fare con se l'elemento è dentro o fuori dal flusso del documento.
Quando un elemento viene tolto dal flusso del documento, significa che lo spazio che originariamente occupava nella pagina scompare. Questo è il caso in cui un elemento è posizionato absoluteo fixed. In questo esempio, il riquadro contenitore dell'elemento posizionato in modo assoluto è collassato perché l'elemento posizionato in modo assoluto è stato rimosso dal flusso del documento:
Guarda il
flusso del documento Pen di Matsuko Friedland (@missmatsuko)
su CodePen.
Supporto browser
Puoi dare un'occhiata, ma non ci sono problemi cross-browser per la topproprietà. Usa a piacimento.