Treci la conținutul principal

Cum să înțelegeți pozițiile relative pe Divi

Divi: cea mai ușoară temă WordPress de utilizat

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62. [Recomandat]

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 aspectul cu Divi. Veți afla lucruri noi în acest tutorial.

Într-adevăr, în acest tutorial, vom discuta despre:

  • O imagine de ansamblu a celor patru tipuri de poziționare Divi
  • Cât de relativă „poziționează” un element pe Divi
  • 4 motive care justifică utilizarea poziției relative pe Divi
  • Poziție relativă față de marjă
  • Poziția relativă față de Traducerea transformatorului

Prezentarea celor patru tipuri de poziționare a Divi

Poziția relativă este unul dintre cele patru tipuri de poziții disponibile în Divi. Iată o privire rapidă la fiecare dintre ele mai jos.

Static (implicit)

Modul cu poziție statică

Din punct de vedere tehnic, elementele statice nu sunt „poziționate” deoarece rămân cu fluxul normal sau 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 (adică de aceea niciunul dintre compensări nu este disponibil în Divi pentru articolele aflate în poziție statică / implicită). În Divi, când alegem poziția implicită pentru un modul, alegem poziția statică. De asemenea, trebuie menționat faptul că unele elemente ale lui Divi (cum ar fi liniile și secțiunile) vor avea în mod implicit o poziție relativă (nu poziția statică).

rudă

Elementele poziționate relativ seamănă cu elementele statice prin faptul 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. În plus, spre deosebire de elementele statice, ele pot fi, de asemenea, poziționate folosind proprietatea Index Z.

absolut

Modul text cu poziție absolută și offset

Un element poziționat absolut iese din fluxul normal al documentului și, prin urmare, nu se creează spațiu real pe pagină pentru element. Ne putem gândi la el ca la un element plutitor 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.

fix

La fel ca poziția absolută, elementele cu poziția fixă ​​vor ieși în afara fluxului normal al paginii și nu vor avea spațiu real creat pe pagină. Principala diferență între absolut și fix este că poziția fixă ​​este relativă la fereastra sau fereastra browserului. Cu alte cuvinte, indiferent unde se află elementul în fluxul normal al paginii, odată ce i sa acordat o poziție fixă, poziția sa va fi acum legată direct de fereastra browserului. Putem folosi proprietățile de sus, jos, stânga și dreapta pentru a poziționa elementul în fereastră. Deoarece elementele fixe se deplasează adesea în spatele sau în fața altor elemente de pe pagină, Indexul Z va ajuta la clasarea elementelor fixe peste altele.

NOTĂ: Există un alt tip de poziționare în CSS numit lipicios. Un articol poziționat lipicios se comportă ca un element relativ poziționat până când derulăm la containerul său (la un moment 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 opțiunile încorporate din acest motiv. Cu toate acestea, există modalități de a utiliza „poziția: lipicios” în Divi.

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

Cât de relativă „poziționează” un element pe Divi

După cum sa menționat în previzualizare, tipul poziției relative este similar cu „poziția” statică, deoarece elementul rămâne în fluxul normal al documentului. Diferența reală este că, odată ce atribuim un element poziției relative, 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ă.

Modul cu o poziționare relativă a poziției pe divi

Utilizarea compensărilor cu poziție relativă

Valorile Origin Offset și Offset vor funcționa împreună pentru a ne poziționa elementul acolo unde 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 25 pixeli și un offset orizontal de 25 pixeli. Observați cum valorile offsetului vor muta elementul departe de originea offsetului orizontal și / sau vertical.

Modul cu poziția relativă 2

Iată același modul cu aceleași compensări, dar cu o origine compensată în partea dreaptă sus.

Modul cu unghiul de poziție relativă 2

Iată același modul cu aceleași compensări și o origine offset în partea dreaptă jos.

Căutați cele mai bune teme și pluginuri WordPress?

Descărcați cele mai bune pluginuri și teme WordPress pe Envato și creați cu ușurință site-ul dvs. Web. Deja mai mult de descărcări 49.720.000. [EXCLUSIV]

Și aici este același modul cu aceleași compensări și o origine compensată în partea stângă jos.

Modul cu poziție relativă unghiulară 3

Nici o distanță de surpriză

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

Modul cu explicație relativă a poziției offset

De ce se folosește poziția relativă

Motivul 1: Pentru a face un container părinte pentru elemente absolut poziționate

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 tehnic „poziționat”). Acest lucru menține fluxul documentului la locul său (cum ar fi static) și ne permite să alegem un container pentru articole absolute.

Poziția relativă 7

Motivul 2: Pentru a muta elemente fără a afecta alte articole din pagină.

Cu poziția relativă, putem folosi compensările pentru a împinge elementele în aliniament fără a afecta celelalte elemente. Și cu Divi, putem profita de interfața mobilă a utilizatorului pentru a poziționa vizual elementele în timp real.

Motivul 3: Pentru a utiliza indexul Z pentru a suprapune alte elemente

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

Poziția relativă de suprapunere

Motivul 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ă de sus negativă la un rând din Divi, astfel încât rândul să se suprapună peste rând, toate rândurile / conținutul se vor deplasa odată cu acesta. Acest lucru lasă un pic de mizerie de curățat, care ar putea fi evitată folosind în schimb compensări de poziție relativă.

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

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

Deși am folosit adesea marjă negativă pentru a poziționa elemente în Divi, probabil că nu este o idee bună dacă putem folosi în schimb poziționarea relativă. Marja se referă la modulul casetei elementului, așa că 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 pentru poziționarea relativă.

Pentru a rezuma

Este foarte probabil ca la sfârșitul zilei să nu înțelegeți prea multe. Poate că cel mai surprinzător aspect al utilizării poziției relative este impactul său (sau impactul) asupra restului designului paginii. Nu numai că funcționează în tandem cu elementele absolute, dar funcționează bine și cu transformarea tradusă pentru a poziționa elementele în locul perfect.

sursa: Elegant Themes

Acest articol conține comentarii 0

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Acest site folosește Akismet pentru a reduce nedorite. Aflați mai multe despre modul în care sunt utilizate datele dvs. de comentarii.

Inapoi in top
1 acțiuni
acțiune1
tweet
Registru