Un ghid pentru înțelegerea și utilizarea poziției absolute a lui Divi

Proprietatea poziției absolute este unul dintre cele patru tipuri principale de poziții disponibile în noile opțiuni de poziție ale Divi. În acest tutorial, vom explora ce înseamnă să oferiți unui element o poziție absolută în Divi și cum îl puteți folosi în avantajul dvs. atunci când proiectați site-uri Divi.

În această postare vom acoperi:

• O prezentare generală a celor patru tipuri de poziționare ale lui Divi
• Cum poziția absolută „poziționează” un element în Divi
• Avantajele și dezavantajele utilizării poziției absolute în Divi
• Utilizarea punctelor de locație cu poziția absolută
• Exemplu de caz de utilizare: Butoane de poziționare absolut pentru blurbs de aceeași înălțime

Verifică!

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

Poziția absolută este una dintre cele patru opțiuni de poziție 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ă). Poziția statică este poziția implicită pentru orice element CSS. În Divi, când alegeți poziția implicită pentru un modul, alegeți 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. Vă puteți 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. Puteți 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 derulați 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 absolută „poziționează” un element în Divi

După cum sa menționat în prezentare generală, un element absolut poziționat va fi poziționat în raport cu cel mai apropiat container părinte poziționat. Un container părinte poziționat este orice container căruia i se dă o valoare de poziție de orice altceva decât statică (adică relativă, absolută, fixă). De aceea, în majoritatea cazurilor, dacă doriți să poziționați un element (cum ar fi un modul) absolut în containerul părinte (sau coloană), veți dori să dați coloanei o poziție relativă înainte de a poziționa modulul copil absolut. Dacă nu, modulul poziționat absolut va căuta mai departe documentul / pagina pentru cel mai apropiat strămoș cu o poziție diferită de statică. Din acest motiv, în Divi, secțiunile și rândurile au ambele poziția relativă în mod implicit, astfel încât să puteți poziționa elemente absolut în interiorul acelor elemente cu ușurință.

Iată o ilustrare a ceea ce va face modulul poziționat absolut dacă anulez poziția implicită a lui Divi pentru o coloană și o setez la static. Observați că, din moment ce coloana nu mai are o poziție, modulul va deveni acum relativ la rândul care are o poziție (relativă).

Avantajele și dezavantajele utilizării poziției absolute în Divi

Poziția absolută este doar una dintre diferitele metode de poziționare a elementelor. Prin urmare, ar fi util să acoperim unele dintre beneficiile și dezavantajele utilizării poziției absolute în loc de altele.

Beneficii

Iată câteva avantaje ale utilizării poziției absolute față de alte proprietăți de poziționare, cum ar fi Transform Translate sau Margins:

Instrument de proiectare bun

Poziție absolută Iese din fluxul normal, astfel încât spațiul real al elementului să nu afecteze proiectarea după ce a avut loc poziționarea. Deși acest lucru poate fi, de asemenea, un dezavantaj, acest lucru poate fi benefic ori de câte ori doriți să adăugați elemente la un design deja stabilit, fără nicio curățare suplimentară care ar putea fi necesară pentru a adăuga spațiu suplimentar la aspect. Cu alte cuvinte, puteți adăuga elemente la pagină fără a fi nevoie să mutați elementele existente pentru a o face.

O alternativă bună la plutitoare și margini

Cu poziția absolută, nu trebuie să depindeți de elementele plutitoare sau de utilizarea marginilor pentru a realiza o poziționare similară. Deși nu este o opțiune nativă în cadrul Divi, cei care sunt familiarizați cu CSS știu că puteți folosi flotante pentru a poziționa elemente la dreapta sau la stânga, ceea ce poate fi un pic buggy și imprevizibil în unele cazuri. Același lucru este valabil și pentru utilizarea marginilor pentru poziționarea elementelor. Uneori este dificil să se prevadă valorile exacte ale marjelor pentru a poziționa un element exact fără a lăsa în urmă spațierea inutilă. Utilizarea unei poziții absolute poate fi o alternativă bună de „poziționare precisă” atât pentru flotări, cât și pentru margini.

Bună asistență pentru browser

Proprietatea poziției absolute este acceptată pe scară largă pe toate browserele principale, astfel încât, de obicei, puteți avea încredere că nu va sparge lucrurile pe alte browsere în mod neașteptat.

Dezavantaje

Iată câteva dezavantaje de luat în considerare atunci când se utilizează poziția absolută:

Risc de izolare

Deoarece elementele poziționate absolut ies din fluxul normal de documente, poate fi dificil să adăugați elemente suplimentare lângă acesta. Acestea devin izolate de alte elemente de pe pagină. De exemplu, în mod normal în Divi, dacă doriți să adăugați un buton sub un modul text, puteți adăuga pur și simplu un modul și acesta va locui automat sub modulul text. Dar dacă modulul de text a fost poziționat absolut, ar trebui să poziționați modulul butonului absolut și apoi să utilizați proprietățile de sus, jos, stânga și dreapta pentru a poziționa butonul sub modulul text. Cu toate acestea, ar putea fi mai ușor să poziționați o coloană (containerul modulului părinte) absolut astfel încât toate modulele din coloană să poată urma fluxul normal de documente (cum ar fi poziționarea unui grup de module în loc de unul).

Mai puțin receptiv

De asemenea, deoarece elementele poziționate absolut ies din fluxul documentului, poate fi dificil să faci poziționarea să fie receptivă pentru dispozitivele mobile. De fapt, mulți dezvoltatori evită poziția: absolută din cauza provocărilor care vin cu designul receptiv. Prin urmare, este important să utilizați unități de lungime relativă (cum ar fi vw sau%) în loc de unități de lungime absolută (cum ar fi px) atunci când este necesar.

Utilizarea punctelor de locație cu poziția absolută

Opțiunile de poziționare a poziției care sunt încorporate în constructorul Divi facilitează poziționarea elementelor într-un mod absolut simplu, făcând clic pe un punct de locație. Odată ce punctul de locație a fost selectat, puteți utiliza decalajele verticale și orizontale pentru a face ajustări suplimentare de poziție din acel punct de locație.

În mod implicit, punctul de locație va fi setat în partea stângă sus. Așadar, adăugarea decalajelor verticale și orizontale la acea locație va adăuga spațiu suplimentar din partea de sus și din stânga.

Din colțul din dreapta sus, decalajul vertical va adăuga spațiu din partea de sus, iar decalajul orizontal va adăuga spațiu în dreapta.

Din colțul din dreapta jos, decalajul vertical va adăuga spațiu din partea de jos, iar decalajul orizontal va adăuga spațiu în dreapta.

Din colțul din stânga jos, decalajul vertical va adăuga spațiu din partea de jos, iar decalajul orizontal va adăuga spațiu din stânga.

Efectuarea de ajustări la elementele absolute centrate

Ori de câte ori selectați o opțiune de locație cu o poziție centrată, Divi folosește o combinație de proprietăți CSS pentru a vă asigura că elementul este perfect centrat, indiferent de dimensiune. De exemplu, dacă y0u selectați locația poziției stânga centrată, Divi va poziționa elementul după cum urmează:

Iată cum arată CSS în backend.

position: absolute!important;
top: 50%;
bottom: auto;
left: 0px;
right: auto;
transform: translateY(-50%);

Partea superioară: 50% este acolo pentru a poziționa partea superioară a elementului exact la 50% din partea superioară a containerului său. Transformarea: translateY (-50%) este acolo pentru a aduce elementul în sus exact o jumătate din înălțimea sa. Acest lucru vă oferă un element perfect plasat, indiferent de înălțimea care poate fi.

Acest lucru este important de știut în cazul în care doriți să faceți ajustări suplimentare (sau compensări) unui element aflat într-o poziție centrată. Nu doriți să faceți greșeala de a folosi opțiunea de transformare fără a cunoaște valorile deja utilizate. Din acest motiv, cel mai bine ar fi să faceți ajustări mai mici folosind proprietatea margin din Divi în loc să transformați traducerea, cu excepția cazului în care înțelegeți ce faceți.

Folosind opțiunea Transformare traducere pentru a poziționa mai multe elemente absolute pentru locația centrată

Dacă înțelegeți cum se folosește transform: translate, acesta poate fi de fapt foarte util pentru compensarea elementelor centrate fără a fi nevoie să cunoașteți lățimea elementului.

De exemplu, să presupunem că poziționați un modul care să fie centrat atât pe verticală cât și pe orizontală cu o coloană în Divi. Ar arăta așa.

Dacă i-am dat elementului o traducere de transformare după cum urmează, nimic nu se va schimba:

• Transformă traducerea (Y): -50%
• Transformă traducerea (X): -50%

Acest lucru se datorează faptului că Divi face deja acest lucru automat în backend pentru dvs. Știind acest lucru, puteți face ajustări din locația punctului central utilizând opțiunea de transformare a transformării. Și dacă utilizați unitatea de lungime procentuală, nu trebuie să cunoașteți lățimea sau înălțimea modulului pentru a face ajustări, deoarece 100% este egal cu lățimea sau înălțimea modulului. Deci, dacă doriți să adăugați patru module în centrul coloanei, puteți utiliza opțiunile de transformare pentru a compensa fiecare dintre modulele poziționate absolut.

Pentru a face acest lucru, ați crea patru module și le-ați oferi tuturor o poziție absolută cu o locație centrată pe verticală și orizontală.

Apoi, utilizați opțiunile de traducere a transformării pentru a regla poziția modulelor în funcție de procentul lățimii și înălțimii modulului în consecință. De exemplu, acordarea unui modul de transformare a axei Y în valoare de -100% va aduce modulului în sus înălțimea exactă a modulului. Dacă acordați modulului o valoare a axei X de -100%, se va deplasa modulul spre stânga cu lățimea exactă a modulului. Acesta poate fi un wat excelent pentru a combina elemente care sunt centrate absolut.

Exemplu de caz de utilizare: Butoane de poziționare absolut pentru blurbs de aceeași înălțime

O aplicație practică a utilizării poziției absolute în Divi este de a da unui buton o poziție absolută în interiorul unei coloane, astfel încât butonul să rămână în partea de jos a coloanei, chiar dacă cantitatea (sau înălțimea) conținutului de deasupra acestuia se poate modifica. Aceasta poate fi o modalitate excelentă de a păstra designul consecvent atunci când afișați elemente pe pagina dvs.

Iată cum să o faci.

Mai întâi, adăugați un rând cu o coloană la secțiune.

Apoi adăugați un modul de blurb în coloană.

Apoi, adăugați un modul buton sub modulul blurb.

Deschideți setările rândului și duplicați coloana de două ori pentru a obține un total de trei coloane identice fiecare cu același blurb și modul buton.

Apoi accesați setările rândului și selectați opțiunea de egalizare a înălțimilor coloanei. Acest lucru vă va asigura că coloanele se vor regla la înălțimea coloanei cu cea mai mare înălțime (sau cel mai mare conținut).

Acum actualizați conținutul corpului fiecăruia dintre modulele blurb, astfel încât cantitatea de conținut să difere cu fiecare coloană. Ar trebui să vedeți că butonul de mai jos se va deplasa în poziția direct sub modulul blurb, făcând fiecare dintre butoane într-o poziție diferită în cadrul coloanei.

Folosind selecția multiplă, selectați fiecare dintre modulele butoanelor și actualizați următoarele setări ale elementului pentru fiecare dintre butoane:

• Poziție: Absolută
• Locație: în partea stângă jos

Aceasta va poziționa fiecare dintre butoane absolut în partea stângă jos a coloanei. Dar, din moment ce butoanele sunt acum în afara fluxului normal al elementelor de pe pagină, veți observa că există unele suprapuneri cu butonul și modulul blurb din coloana din stânga. Pentru a remedia acest lucru, trebuie pur și simplu să creăm un spațiu real pentru buton adăugând niște umplutură în coloană, după cum urmează:

• Căptușeală: fund de 50 px

Acum aveți trei elemente prezentate cu o plasare constantă a butonului pentru fiecare, chiar dacă cantitatea de conținut (sau înălțimea blurbului) se poate modifica.

Gânduri finale

Sper că acest post a aruncat o lumină asupra proprietății poziției absolute și cât de puternică poate fi utilizată în cadrul Divi. Odată ce ați înțeles cum funcționează poziția, puteți utiliza pentru a adăuga tot felul de elemente de design precise care vor duce site-ul dvs. la nivelul următor.

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

Noroc!