Par top, bottom, left, un rightīpašības tiek izmantotas ar pozīcijā, lai uzstādītu izvietošanu elementa. Tie ietekmē tikai pozicionētos elementus, kas ir elementi, kuru positionīpašums ir iestatīts uz neko citu static. Piemēram: relative, absolute, fixedvai sticky.
div ( : || || auto || inherit; )Varat to izmantot, piemēram, lai nomirzītu ikonu savā vietā:
button .icon ( position: relative; top: 1px; )Vai arī ievietojiet īpašu elementu konteinera iekšpusē.
.container ( position: relative; ) .container header ( position: absolute; top: 0; )Vērtība top, bottom, left, un rightvar būt jebkurš no šiem:
- jebkuru no derīgajiem CSS garumiem
- procentuālā daļa no saturošā elementa augstuma (par
topunbottom) vai platuma (parleftunright) autoinherit
Elements parasti attālināsies no attiecīgās puses, kad tā vērtība būs pozitīva, un uz to, kad vērtība būs negatīva. Zemāk esošajā piemērā pozitīvs garums topelementa pārvietošanai uz leju (prom no augšas) un negatīvs garums topelementam virzīs elementu uz augšu (virzienā uz augšu):
Skatīt Pen
Top: pozitīvas un negatīvas vērtības, ko Matsuko Friedland (@missmatsuko)
vietnē CodePen.
Pozīcija
Par elementu izvietošana ar vērtību top, bottom, leftvai rightir atkarīgs no tā vērtības position. Apskatīsim, kas notiek, kad topelementiem ar atšķirīgām vērtībām iestatām vienu un to pašu vērtību position.
static
topĪpašums neietekmē unpositioned elementi (elementi, ar positionkomplektu līdz static). Šādi elementi tiek izvietoti pēc noklusējuma. Jūs varētu izmantot position: static;kā vienu metodi, lai atsauktu topelementa ietekmi.
relative
Kad tas topir iestatīts uz elementu ar positioniestatījumu uz relative, elements virzīsies uz augšu vai uz leju attiecībā pret tā sākotnējo izvietojumu dokumentā.
Skatiet pildspalvas
augšdaļu: Matsuko Friedland (@missmatsuko) radinieks
vietnē CodePen.
absolute
Ja tas topir iestatīts uz elementu ar positioniestatījumu uz absolute, elements virzīsies uz augšu vai uz leju attiecībā pret tā tuvāko senču (vai dokumentu, ja nav novietotu priekšteču).
Šajā demonstrācijā rozā lodziņš kreisajā pusē ir novietots 50 pikseļus uz leju no lapas augšdaļas, jo tajā nav izvietoti priekšteču elementi. Rozā lodziņš labajā pusē ir novietota 50 pikseļi no augšas uz leju tā vecāka, jo vecākiem ir positionpar relative.
Skatiet pildspalvas
augšdaļu: absolūti autors Matsuko Friedland (@missmatsuko)
vietnē CodePen.
fixed
Ja tas topir iestatīts uz elementu ar positioniestatījumu uz fixed, elements virzīsies uz augšu vai uz leju attiecībā pret pārlūkprogrammas skatu portu.
Skatiet pildspalvas augšdaļu
: CSS-Tricks (@ css-tricks)
labojis vietnē CodePen.
No pirmā acu uzmetiena var šķist, ka starp absoluteun nav atšķirības fixed. Atšķirību var redzēt, salīdzinot tos lapā, kurā ir pietiekami daudz satura, lai ritinātu. Ritinot uz leju, fixedpozīcijas elements vienmēr ir redzams, bet absolutepozīcijas elements ritina prom.
Skatiet pildspalvas
ritināšanu: fiksēts pret absolūtu CSS-Tricks (@ css-tricks)
vietnē CodePen.
sticky
Kad tas topir iestatīts uz elementu ar positioniestatījumu uz sticky, elements pārvietosies uz augšu vai uz leju attiecībā pret tuvāko priekšteci ar ritināšanas lodziņu (vai skata logu, ja nevienam no senčiem nav ritināšanas lodziņa), ierobežojot to ar elementu saturošajām robežām.
Nosakot toppar stickynovietots elementa nav daudz darīt, ja tā konteiners ir garāks, nekā tas ir, un jums ir pietiekami daudz satura, lai ritinātu. Tāpat kā ar fixed, arī ritinot, elements paliks redzams. Atšķirībā no tā fixed, kad elements sasniegs tā saturošā elementa malas, tas vairs nebūs redzams.
Skatiet
CSS-Tricks (@ css-tricks),
izmantojot CodePen, pildspalvas ritināšanu: fiksēts vai lipīgs .
Gotčas
Pretējo sānu iestatīšana
Jūs varat iestatīt vērtību katram top, bottom, left, un rightuz vienu elementu. Iestatot vērtības pretējām pusēm ( topun bottom, vai leftun un right), rezultāts ne vienmēr var būt tāds, kādu jūs sagaidāt.
Vairumā gadījumu bottomtiek ignorēts, ja toptas jau ir iestatīts, un righttiek ignorēts, ja lefttas jau ir iestatīts. Ja virziens ir iestatīts uz rtl(no labās uz kreiso), lefttiek ignorēts right. Lai katrai vērtībai būtu ietekme, elementam jābūt positioniestatītam uz absolutevai fixedun heightiestatītam auto(noklusējums).
Šajā piemērā, mēs nosakām top, bottom, left, un right, lai `20px`, un sagaida katru pusi no iekšējā kaste būt 20px prom no pusēm ārējā kastē:
Skatiet
CSS-Tricks (@ css-tricks)
CodePen pildspalvas iestatīšanas augšdaļu, apakšu, kreiso un labo pusi.
Ja iestatījums nav noteikts, tas nav salīdzināms ar skata punktu
Elementi, kuriem positioniestatīts iestatījums uz fixed, ne vienmēr tiek izvietoti attiecībā pret skatu portu. Tas tiks novietots attiecībā pret savu tuvāko sencis ar transform, perspectivevai filterīpašumu, kas, lai kaut ko, izņemot none, ja tāda ir.
Vietas pievienošana vai noņemšana
Ja esat novietojis elementu un atklājis, ka tagad ir tukša vieta vai nepietiek vietas, kā gaidījāt, tas var būt saistīts ar to, vai elements atrodas vai nav dokumenta plūsmā.
Kad elements tiek izņemts no dokumenta plūsmas, tas nozīmē, ka pazūd telpa, kuru tas sākotnēji bija ieņēmis lapā. Tas notiek, ja elements ir novietots absolutevai fixed. Šajā piemērā absolūti novietotā elementa saturošā lodziņš ir sabrucis, jo absolūti novietotais elements tika noņemts no dokumenta plūsmas:
Skatiet
Matsuko Friedland (@missmatsuko) Pildspalvas dokumentu plūsmu
vietnē CodePen.
Pārlūka atbalsts
Varat palūrēt, taču topīpašumam nav problēmu ar pārlūkprogrammām . Izmantojiet pēc vēlēšanās.