De top, bottom, leftși rightproprietăți sunt utilizate cu poziția de a stabili plasarea unui element. Ele au un efect doar asupra elementelor poziționate, care sunt elemente cu positionproprietatea setată la altceva decât static. De exemplu: relative, absolute, fixedsau sticky.
div ( : || || auto || inherit; )S-ar putea să-l utilizați, de exemplu, pentru a împinge o pictogramă în loc:
button .icon ( position: relative; top: 1px; )Sau poziționați un element special în interiorul unui container.
.container ( position: relative; ) .container header ( position: absolute; top: 0; )Valoarea pentru top, bottom, left, și rightpoate fi oricare dintre următoarele:
- oricare dintre lungimile valide ale CSS
- un procent din înălțimea elementului care conține (pentru
topșibottom) sau lățimea (pentruleftșiright) autoinherit
Elementul se va îndepărta, în general, de o anumită latură atunci când valoarea sa este pozitivă și spre el când valoarea este negativă. În exemplul de mai jos, o lungime pozitivă pentru topmută elementul în jos (departe de partea de sus) și o lungime negativă pentru topva muta elementul în sus (spre partea de sus):
Vedeți Pen
Top: valori pozitive și negative de Matsuko Friedland (@missmatsuko)
pe CodePen.
Poziţie
Plasarea unui element cu o valoare pentru top, bottom, leftsau rightdepinde de valoarea sa pentru position. Să aruncăm o privire la ce se întâmplă atunci când stabilim aceeași valoare pentru topelemente cu valori diferite pentru position.
static
topProprietatea nu are nici un efect asupra elementelor unpositioned (elemente cu positionset pentru a static). Acesta este modul în care elementele sunt poziționate în mod implicit. Puteți utiliza position: static;ca metodă pentru a anula efectul topasupra unui element.
relative
Când topeste setat pe un element cu positionsetat la relative, elementul se va deplasa în sus sau în jos în raport cu plasarea sa originală în document.
Vezi Pen
Top: relative de Matsuko Friedland (@missmatsuko)
pe CodePen.
absolute
Când topeste setat pe un element cu positionsetat la absolute, elementul se va deplasa în sus sau în jos în raport cu cel mai apropiat strămoș poziționat (sau documentul, dacă nu există strămoși poziționați).
În această demonstrație, caseta roz din stânga este poziționată la 50 px în jos din partea de sus a paginii, deoarece nu are elemente strămoșe poziționate. Caseta roz de pe dreapta este poziționat 50px jos din partea de sus a societății - mamă, deoarece părintele are positionde relative.
Vezi Pen
Top: absolute de Matsuko Friedland (@missmatsuko)
pe CodePen.
fixed
Când topeste setat pe un element cu positionsetat la fixed, elementul se va deplasa în sus sau în jos în raport cu ecranul browserului.
Vedeți Pen
Top: fixat de CSS-Tricks (@ css-tricks)
pe CodePen.
La prima vedere, poate părea că nu există o diferență între absoluteși fixed. Diferența poate fi văzută atunci când le comparați pe o pagină care are suficient conținut pentru a derula. Pe măsură ce derulați în jos, fixedelementul de poziție este întotdeauna vizibil, în timp ce absoluteelementul de poziție derulează.
Vedeți
Defilarea stiloului : fix vs. absolut de CSS-Tricks (@ css-tricks)
pe CodePen.
sticky
Când topeste setat pe un element cu positionsetat la sticky, elementul se va deplasa în sus sau în jos în raport cu cel mai apropiat strămoș cu o casetă de derulare (sau fereastra, dacă niciun strămoș nu are o casetă de derulare), limitată la limitele elementului său de conținut.
Setarea toppe un stickyelement poziționat nu face mult decât dacă containerul său este mai înalt decât este și aveți suficient conținut pentru a derula. Ca și în cazul în care fixed, elementul va rămâne vizibil pe măsură ce derulați. Spre deosebire de faptul fixedcă elementul va cădea din vizibilitate odată ce va ajunge la marginile elementului său conținător.
Vedeți
Scrolling Pen : fix vs. sticky de CSS-Tricks (@ css-tricks)
pe CodePen.
Gotchas
Setarea laturilor opuse
Puteți seta o valoare pentru fiecare top, bottom, left, și rightpe un singur element. Atunci când setați valori pentru părți opuse ( topși bottom, sau leftși right), rezultatul ar putea să nu fie întotdeauna ceea ce vă așteptați.
În majoritatea cazurilor, bottomeste ignorat dacă topeste deja setat și righteste ignorat dacă lefteste deja setat. Când direcția este setată la rtl(de la dreapta la stânga), lefteste ignorată în loc de right. Pentru ca fiecare valoare să aibă un efect, elementul trebuie să aibă un positionset la absolutesau fixedși heightsetat la auto(implicit).
În acest exemplu, ne - am stabilit top, bottom, leftși rightpentru a `20px`, și se așteaptă ca fiecare parte a cutiei interioare să fie 20px departe de părțile laterale ale cutiei exterioare:
Vedeți
Setarea stiloului sus, jos, stânga și dreapta de CSS-Tricks (@ css-tricks)
pe CodePen.
Când este remediat nu este relativ la fereastra de vizualizare
Elementele cu positionsetat la fixednu sunt întotdeauna poziționate în raport cu fereastra de vizualizare. Acesta va fi poziționat în raport cu strămoșul său cel mai apropiat cu transform, perspectivesau filterset de proprietăți la altceva decât none, dacă există.
Adăugarea sau eliminarea spațiului
Dacă ați poziționat un element și ați descoperit că acum există un spațiu gol sau nu există suficient spațiu în locul în care vă așteptați, s-ar putea să aibă legătură cu dacă elementul se află în sau din fluxul documentului.
Când un element este scos din fluxul documentului, înseamnă că spațiul pe care l-a ocupat inițial pe pagină dispare. Acesta este cazul când un element este poziționat absolutesau fixed. În acest exemplu, caseta care conține elementul poziționat absolut s-a prăbușit deoarece elementul poziționat absolut a fost eliminat din fluxul documentului:
Vedeți
fluxul de documente Pen de Matsuko Friedland (@missmatsuko)
pe CodePen.
Suport pentru browser
Puteți să aruncați o privire, dar nu există probleme legate de browser pentru topproprietate. Folosiți după bunul plac.