Vetia e pozicionit relativ është ndoshta më misteriozja nga llojet e pozicioneve. Megjithatë, pasi të kuptojmë se si funksionon, ne mund ta përdorim atë në avantazhin tonë kur dizajnojmë paraqitjet me Divi. Do të mësoni gjëra të reja në këtë tutorial.

Në të vërtetë, në këtë tutorial, ne do të diskutojmë:

  • Një përmbledhje e katër llojeve të pozicionimit Divi
  • Si pozicioni relativ "pozicionon" një element mbi Divi
  • 4 arsye që justifikojnë përdorimin e pozicionit relativ mbi Divi
  • Pozicioni relativ vs marzhi
  • Pozicioni relativ vs Përkthimi i Transformatorit

Prezantimi i katër llojeve të pozicionimit të Divi

Pozicioni relativ është një nga katër llojet e pozicionit të disponueshëm në Divi. Këtu keni një vështrim të shpejtë në secilën prej tyre më poshtë.

Statike (parazgjedhur)

Modul me pozicion statik

Teknikisht, elementet statike nuk janë "të pozicionuara" sepse ato qëndrojnë me rrjedhën normale ose rendin e elementeve në faqe dhe ato nuk i përgjigjen vetive të sipërme, të djathtë, të poshtme dhe të majtë si elementët e tjerë të pozicionuar (d.m.th. është arsyeja pse asnjë nga kompensimet nuk është në dispozicion në Divi për artikujt në pozicion statik / të paracaktuar). Në Divi, kur zgjedhim pozicionin e paracaktuar për një modul, zgjedhim pozicionin statik. Duhet gjithashtu të përmendet se disa elementë të Divi (si linjat dhe seksionet) do të kenë një pozicion relativ si parazgjedhje (jo pozicionin statik).

i afërm

Modul me pozicion relativ

Elementet relativisht të pozicionuara janë shumë si elementet statike në atë që ndjekin rrjedhën normale të faqes. Dallimi kryesor është se elementët relativisht të pozicionuar mund të pozicionohen duke përdorur vetitë e sipërme, të poshtme, të majtë dhe të djathtë. Për më tepër, ndryshe nga elementet statike, ato gjithashtu mund të pozicionohen duke përdorur vetinë Z Index.

absolut

Modul teksti me pozicion dhe kompensim absolut

Një element i pozicionuar absolutisht del nga rrjedha normale e dokumentit dhe për këtë arsye nuk krijohet hapësirë ​​aktuale në faqe për elementin. Ne mund ta mendojmë atë si një element lundrues mbi elementët e tjerë në faqe që zënë hapësirë ​​reale. Do të pozicionohet në krahasim me enën më të afërt mëmë.

fikse

Modul me ndarje të pozicionit fiks

Ashtu si pozicioni absolut, elementët me pozicionin fiks do të shkojnë jashtë rrjedhës normale të faqes dhe nuk do të kenë hapësirë ​​aktuale të krijuar në faqe. Dallimi kryesor midis absolutes dhe fiksit është se pozicioni fiks është relativ me dritaren ose dritaren e shfletuesit. Me fjalë të tjera, pa marrë parasysh se ku është elementi në rrjedhën normale të faqes, pasi të jetë dhënë një pozicion fiks, pozicioni i tij tani do të lidhet drejtpërdrejt me dritaren e shfletuesit. Mund të përdorim vetitë e sipërme, të poshtme, të majtë dhe të djathtë për të pozicionuar elementin në dritare. Ndërsa elementët fiks shpesh rrinë pezull ose përpara elementeve të tjerë në faqe, Z Index do të ndihmojë në renditjen e elementeve fikse mbi të tjerët.

SHENIM: Ekziston edhe një lloj tjetër i pozicionimit në CSS i quajtur ngjitës. Një artikull i pozicionuar me ngjitje sillet si një artikull relativisht i pozicionuar derisa të lëvizim te kontejneri i tij (në një kohë të përcaktuar nga vlera kryesore). Pastaj artikulli fiksohet (ose ngec) derisa përdoruesi të lëvizë deri në fund të kontejnerit. Sidoqoftë, pozicioni ngjitës mund të jetë pak i paparashikueshëm pasi faktorë të tjerë mund të pengojnë funksionalitetin. Në Divi, opsioni ngjitës nuk është i disponueshëm në opsionet e integruara për këtë arsye. Megjithatë, ka mënyra për të përdorur "pozicionin: ngjitës" në Divi.

Sa pozicioni relativ "pozicionon" një element mbi Divi

Siç është përmendur në pamjen paraprake, lloji i pozicionit relativ është i ngjashëm me "pozicionin" statik sepse elementi qëndron në rrjedhën normale të dokumentit. Dallimi i vërtetë është se sapo të caktojmë një element në pozicionin relativ, ai tani ka mundësi të reja në dispozicion për pozicionimin e elementit. Këto mundësi përfshijnë vetitë e sipërme, të poshtme, të majtë dhe të djathtë, si dhe vetinë e Indeksit Z.

Në Divi, këto mundësi shtesë të pozicionit mund të gjenden nën grupin e opsioneve të pozicionit pasi të jetë zgjedhur pozicioni relativ.

Modul me një pozicion relativ të pozicionimit në divi

Përdorimi i ndërprerjeve me pozicion relativ

Vlerat Origin Offset dhe Offset do të punojnë së bashku për të pozicionuar elementin tonë atje ku duam në enën mëmë. Në këtë shembull, ne kemi një modul që ka një pozicion relativ, zhvendosje lart majtas, zhvendosje vertikale prej 25 pikselë dhe zhvendosje horizontale prej 25 pikselësh. Vini re se si vlerat e kompensimit do ta largojnë elementin nga origjina e kompensimit horizontalisht dhe / ose vertikalisht.

Moduli me pozicion relativ 2

Këtu është i njëjti modul me të njëjtat ndërprerje, por me një origjinë të kompensuar në krye të djathtë.

Moduli me kënd relativ të pozicionit 2

Këtu është i njëjti modul me të njëjtat ndërprerje dhe një origjinë e kompensuar në fund të djathtë.

Dhe këtu është i njëjti modul me të njëjtat ndërprerje dhe një origjinë e kompensuar në fund të majtë.

Modul me pozicion relativ këndor 3

Nuk ka hapësirë ​​të papritur

Me pozicionimin relativ, hapësira aktuale e elementit mbetet në vendin e tij origjinal pas lëvizjes së elementit duke përdorur ndërprerjet (lart, poshtë, majtas, djathtas). Pozicioni i ri i elementit nuk lëviz dhe nuk ndikon në hapësirën e pjesës tjetër të elementeve në faqe. Në thelb qëndron mbi elementët e tjerë si një frymë që i ka lënë trupit.

Moduli me shpjegimin relativ të pozicionit të kompensimit

Pse të përdorim pozicionin relativ

Arsyeja 1: Të krijosh një enë mëmë për elementë absolutisht të pozicionuar

Ky është ndoshta aplikacioni më i popullarizuar i llojit relativ të pozicionit. Meqenëse çdo element i pozicionuar absolutisht është relativ me paraardhësin më të afërt të pozicionuar, ne mund të zgjedhim ta bëjmë një nga paraardhësit e tij një element të pozicionuar thjesht duke i dhënë një pozicion relativ (pozicioni i paracaktuar statik nuk është teknikisht "i pozicionuar"). Kjo e mban rrjedhën e dokumentit në vend (si statik) dhe na lejon të zgjedhim një enë për artikujt absolutë.

Pozicioni relativ 7

Arsyeja 2: Të zhvendosni artikujt pa ndikuar artikujt e tjerë në faqe.

Me pozicionin relativ, ne mund të përdorim kompensimet për të shtyrë elementet në rreshtim pa ndikuar në elementët e tjerë. Dhe me Divi, ne mund të përfitojmë nga ndërfaqja e lëvizshme e përdoruesit për të pozicionuar vizualisht elementet në kohë reale.

Arsyeja 3: Për të përdorur indeksin Z për të mbivendosur elementët e tjerë

Si parazgjedhje, elementet statike nuk mund të rirregullohen në boshtin z, përveç nëse u jepet pozicion relativ. Pasi të jetë në pozicion relativ, elementi do të mbetet i pozicionuar në rrjedhën normale të dokumentit. Vetëm tani kemi mundësinë të përfitojmë nga indeksimi Z për t'i vendosur elementet në një renditje të veçantë kur ato mbivendosen.

Pozicioni relativ i mbivendosjes

Arsyeja 4: Për të shmangur përdorimin e marzhit negativ për qëllime pozicioni

Pozicionimi relativ do të lërë pas hapësirën e pozicionit të tij origjinal. Megjithatë, me një diferencë negative, përmbajtje dhe hapësira e saj origjinale janë të dyja të zhvendosura. Për shembull, nëse shtojmë një diferencë negative të sipërme në një rresht në Divi në mënyrë që rreshti të mbivendoset me rreshtin sipër tij, të gjitha rreshtat / përmbajtje do të lëvizë me të. Kjo lë një rrëmujë për të pastruar që mund të shmanget duke përdorur kompensime relative të pozicionit në vend.

Nëse i japim të njëjtit modul një pozicion relativ, mund të përdorim kompensimin vertikal për të sjellë modulin lart pa ndikuar në pjesën tjetër të hapësirës në faqe.

Animacion i pozicionit relativ

Edhe pse shpesh kam përdorur marzhin negativ për të pozicionuar elementet në Divi, ndoshta nuk është ide e mirë nëse mund të përdorim pozicionim relativ në vend. Marzhi lidhet me modulin e kutisë së elementit, kështu që me të vërtetë ka për qëllim të shtojë hapësirën brenda dhe rreth elementit vetë, jo aq për pozicionimin e elementit të kompensuar nga kontejnerët e tij mëmë sesa për pozicionimi relativ.

Për ta përmbledhur

Ka shumë të ngjarë që në fund të ditës, të mos keni kuptuar shumë. Ndoshta aspekti më befasues i përdorimit të pozicionit relativ është ndikimi (ose ndikimi) i tij në pjesën tjetër të dizajnit të faqes. Jo vetëm që funksionon së bashku me elementët absolutë, por gjithashtu funksionon mirë me transformimin e përkthyer për të pozicionuar elementet në vendin e përsosur.

Burimi: Elegant Temat