Înțelegerea și utilizarea poziției relative în Divi

Proprietatea relativă a poziției este probabil cea mai misterioasă dintre tipurile de poziție. Cu toate acestea, odată ce înțelegem cum funcționează, îl putem folosi în avantajul nostru atunci când proiectăm un site în Divi. Ceea ce descoperim vă poate surprinde.

În această postare vom acoperi:

• O prezentare generală a celor patru tipuri de poziționare ale lui Divi
• Cum poziția relativă „poziționează” un element în Divi
• 5 motive pentru utilizarea poziției relative în Divi
• Poziția relativă vs. marja
• Poziție relativă vs. Transformare tradusă

Verifică!

Prezentare generală a celor patru tipuri de poziționare ale lui Divi

Poziția relativă este unul dintre cele patru tipuri de poziții disponibile în Divi. Iată mai jos o prezentare rapidă a fiecăruia.

Static (implicit)

Din punct de vedere tehnic, elementele statice nu sunt „poziționate”, deoarece rămân la fluxul normal sau la ordinea elementelor de pe pagină și nu răspund la proprietățile de sus, dreapta, jos și stânga ca și alte elemente poziționate (motiv pentru care nu compensările sunt disponibile în Divi pentru elementele aflate în poziția statică / implicită). În Divi, când alegem poziția implicită pentru un modul, alegem poziția statică. De asemenea, merită menționat faptul că unele elemente din Divi (cum ar fi rândurile și secțiunile) vor avea în mod implicit o poziție relativă (nu poziția statică).

Relativ

Elementele relativ poziționate sunt un fel de elemente statice în sensul că urmează fluxul normal al paginii. Diferența principală este că elementele relativ poziționate pot fi poziționate folosind proprietățile de sus, jos, stânga și dreapta. De asemenea, spre deosebire de elementele statice, ele pot fi, de asemenea, poziționate folosind proprietatea Index Z.

Absolut

Un element absolut poziționat iese din fluxul normal de documente și, prin urmare, nu se creează spațiu real pe pagină pentru element. Ne putem gândi la acesta ca la un element care pluteste deasupra celorlalte elemente de pe pagină care ocupă spațiu real. Acesta va fi poziționat în raport cu cel mai apropiat container părinte poziționat.

Fix

La fel ca poziția absolută, elementele cu poziția fixă ​​vor ieși din fluxul normal al paginii și nu vor avea spațiu real creat în pagină. Diferența cheie între absolut și fix este că poziția fixă ​​este relativă la fereastra browserului sau la fereastra de vizualizare. Cu alte cuvinte, indiferent unde se află elementul în fluxul normal al paginii, odată ce i se acordă o poziție fixă, poziția sa se va raporta acum direct la fereastra browserului. Putem utiliza proprietățile de sus, jos, stânga și dreapta pentru a poziționa elementul în fereastra de vizualizare. Deoarece elementele fixe vor plasa adesea în spatele sau în fața altor elemente de pe pagină, Indexul Z va ajuta la comanda elementelor fixe deasupra altora.

NOTĂ: Există un alt tip de poziționare în CSS numit lipicios. Un element poziționat lipicios se comportă ca un element relativ poziționat până când derulăm la containerul său (la un moment dat determinat de valoarea de sus). Apoi elementul devine fix (sau blocat) până când utilizatorul derulează până la capătul containerului. Cu toate acestea, poziția lipicioasă poate fi puțin imprevizibilă, deoarece alți factori pot inhiba funcționalitatea. În Divi, opțiunea lipicioasă nu este disponibilă în cadrul opțiunilor încorporate din acest motiv. Cu toate acestea, există modalități de a utiliza „poziția: lipicios” în Divi.

Cum poziția relativă „poziționează” un element în Divi

După cum sa menționat în prezentarea generală, tipul poziției relative este similar cu „poziția” statică, deoarece elementul rămâne în fluxul normal al documentului (codul HTML de pe pagină). Diferența reală este că, odată ce atribuim un element cu poziția relativă, acesta are acum noi opțiuni disponibile pentru poziționarea elementului. Aceste opțiuni includ proprietățile de sus, jos, stânga și dreapta, precum și proprietatea Index Z.

În Divi, aceste opțiuni de poziție suplimentare pot fi găsite în grupul de opțiuni de poziție, odată ce poziția relativă a fost selectată.

Utilizarea Offset-urilor cu poziția relativă

Valorile Offset Origin și Offset vor funcționa împreună pentru a ne poziționa elementul oriunde dorim în containerul părinte. În acest exemplu, avem un modul care are o poziție relativă, un offset stânga sus, un offset vertical de 25px și un offset orizontal de 25px. Observați cum valorile offsetului vor muta elementul departe de originea offsetului orizontal și / sau vertical.

Aici este același modul cu aceleași compensări, dar cu o origine a offsetului din dreapta sus.

Aici este același modul cu aceleași compensări și o origine a offsetului din dreapta jos.

Și aici este același modul cu aceleași compensări și o origine a offsetului din stânga jos.

Fără surprize de spațiu

Cu poziționarea relativă, spațiul real al elementului rămâne în locul său inițial după ce elementul este mutat folosind compensările (sus, jos, stânga, dreapta). Noua poziție a elementului nu se mișcă și nu afectează nicio distanță dintre restul elementelor de pe pagină. Practic, planează asupra celorlalte elemente ca un spirit care și-a părăsit corpul.

Motive pentru a utiliza poziția relativă

# 1 Pentru a reda un container părinte pentru elemente poziționate absolut

Aceasta este probabil cea mai populară aplicație de tipul poziției relative. Deoarece orice element absolut poziționat este relativ la cel mai apropiat strămoș poziționat, putem alege să facem unul dintre strămoșii săi un element poziționat pur și simplu oferindu-i o poziție relativă (poziția statică implicită nu este „poziționată” din punct de vedere tehnic). Acest lucru menține fluxul documentului la locul său (cum ar fi static) și ne permite să alegem un container pentru elementele absolute.

# 2 Pentru a muta elemente fără a afecta celelalte elemente de pe pagină.

Cu poziția relativă, putem utiliza compensările pentru a împinge elementele în aliniere, fără a afecta alte elemente. Și cu Divi, putem profita de interfața interfață glisabilă pentru a poziționa elementele vizual în timp real.

# 3 Pentru a utiliza indexul Z pentru suprapunerea altor elemente

În mod implicit, elementele statice nu pot fi reordonate în axa z decât dacă este dată poziția relativă. Odată ajuns în poziția relativă, elementul va rămâne poziționat în fluxul normal al documentului. Abia acum, avem capacitatea de a profita de indexarea Z pentru a plasa elemente într-o anumită ordine atunci când se suprapun reciproc.

# 4 Pentru a evita utilizarea marjei negative în scopuri de poziție

Poziționarea relativă va lăsa în urmă spațiul poziției sale inițiale. Cu toate acestea, cu o marjă negativă, atât conținutul, cât și spațiul său original sunt mutate. De exemplu, dacă adăugăm o marjă superioară negativă la un rând din Divi, astfel încât rândul să se suprapună peste rândul de deasupra acestuia, toate rândurile / conținutul se vor deplasa în sus cu acesta. Acest lucru lasă un pic de mizerie de curățat, care ar putea fi evitată folosind în schimb compensările de poziție relativă.

Iată o ilustrare a ceea ce se întâmplă atunci când folosim o marjă superioară negativă pentru a muta un modul în sus. Observați cum sunt aduse cu el restul elementelor de mai jos.

Dacă acordăm aceluiași modul o poziție relativă, putem folosi decalajul vertical pentru a aduce modulul în sus fără ca acesta să afecteze restul spațiului de pe pagină.

Deși am folosit adesea o marjă negativă pentru a poziționa elemente în Divi, probabil că nu este o idee bună dacă putem folosi poziționarea relativă. Marja se referă la modulul cutie al elementului, astfel încât este cu adevărat menită să adauge spațierea în și în jurul elementului în sine, nu atât pentru poziționarea elementului decalat de la containerul părinte, cât și cu poziționarea relativă.

Poziție relativă vs. Transformare tradusă

Poziția relativă este într-adevăr similară cu utilizarea elementelor transformate în elemente de poziție pe o pagină. Amândoi mișcă elementul lăsând spațiul real în locul său original și fără a afecta celelalte elemente de pe pagină.

Traducerea este mai bună pentru animație și tranziții (cum ar fi efectele cu mouse-ul)

Cu toate acestea, se pare că traducerea este cea mai bună pentru animație și tranziții (cum ar fi efectele hover), deoarece oferă tranziții mai rapide și mai ușoare. Folosind offset-urile de sus, de jos, de stânga și de dreapta pentru a anima sau trece un element relativ ar putea fi mai agitat și ar putea face browserul nostru să funcționeze mai greu decât are nevoie.

Unitățile de lungime relativă răspund diferit

Dacă folosim unități de lungime relativă (cum ar fi% sau vw) pentru proiectarea receptivă, acestea vor funcționa diferit cu poziția relativă și vor transforma.

Un modul Divi cu o poziție relativă și un decalaj orizontal de 50% va muta modulul pe orizontală cu o cantitate egală cu 50% din lățimea containerului (sau coloanei) părinte.

Un modul Divi cu o transformare de transformare (axa X) de 50% va muta modulul pe orizontală cu o cantitate egală cu 50% din lățimea modulului în sine.

Combinând poziția relativă și transformă Traducerea în elemente centrale

Așa cum tocmai am acoperit, poziția relativă este relativă la părinte, iar proprietatea de traducere a transformării este relativă la elementul în sine. Din acest motiv, putem folosi ambele în combinație pentru poziționarea elementelor exact așa cum ne dorim. Putem chiar folosi această tehnică pentru a centra elementele din containerul lor.

De exemplu, putem utiliza poziția relativă offset orizontal pentru a poziționa modulul la dreapta exact 50% din lățimea coloanei.

Apoi utilizați proprietatea de traducere pentru a muta modulul 50% (din lățimea modulului) spre stânga. Acest lucru vă va asigura că modulul rămâne în centrul coloanei, indiferent de lățimea modulului.

Gânduri finale

Dacă sunteți ca și mine înainte de a scrie acest articol, probabil că nu ați înțeles sau ați folosit foarte bine tipul de poziție relativă. Poate că cel mai surprinzător aspect al acestei poziții relative este modul în care aceasta afectează (sau nu are impact) restul designului de pe pagină. Nu numai că funcționează în tandem cu elementele absolute, dar funcționează bine și cu transformarea în elemente de poziție în locul perfect.

Care a fost experiența dvs. cu tipul de poziție relativă?

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!