Gå till innehållet

Hur man förstår relativa positioner på Divi

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Den relativa positionsegenskapen är kanske den mest mystiska av typerna av position. Men när vi förstår hur det fungerar kan vi använda det till vår fördel när vi utformar layouten med Divi. Du lär dig nya saker i denna handledning.

I denna handledning kommer vi faktiskt att diskutera:

  • En översikt över de fyra typerna av Divi-positionering
  • Hur relativ position "positionerar" ett element på Divi
  • 4 skäl som motiverar användningen av den relativa positionen på Divi
  • Relativ position kontra marginal
  • Relativ position vs Transformer Translate

Presentation av de fyra typerna av Divi-positionering

Relativ position är en av de fyra typerna av positioner som finns i Divi. Här är en snabb titt på var och en av dem nedan.

Statisk (standard)

Modul med statisk position

Tekniskt sett är "statiska element" inte "placerade" eftersom de håller sig med det normala flödet eller ordningen på elementen på sidan, och de svarar inte på de övre, högra, nedre och vänstra egenskaperna som andra placerade element (dvs. det är därför ingen av förskjutningarna är tillgängliga i Divi för objekt i statisk / standardposition). När vi väljer standardposition för en modul i Divi väljer vi den statiska positionen. Det bör också nämnas att vissa element i Divi (som linjer och sektioner) har en relativ position som standard (inte den statiska positionen).

relativ

Relativt placerade element är ungefär som statiska element genom att de följer sidans normala flöde. Huvudskillnaden är att relativt placerade element kan placeras med hjälp av de övre, nedre, vänstra och högra egenskaperna. Till skillnad från statiska element kan de också placeras med Z Index-egenskapen.

absolut

Textmodul med absolut position och förskjutning

Ett absolut placerat element lämnar det normala dokumentflödet och därför skapas inget faktiskt utrymme på sidan för elementet. Vi kan tänka på det som ett element som flyter ovanpå andra element på sidan som tar riktigt utrymme. Den kommer att placeras relativt närmaste föräldrabehållare.

fast

Liksom den absoluta positionen kommer element med den fasta positionen att gå ut ur det normala sidflödet och det finns inget faktiskt utrymme på sidan. Huvudskillnaden mellan det absoluta och det fasta är att den fasta positionen är relativt fönstret eller webbläsarfönstret. Med andra ord, oavsett var elementet befinner sig i sidans normala flöde, kommer det nu att vara direktlänkat till webbläsarfönstret när det har fått en fast position. Vi kan använda egenskaperna för topp, botten, vänster och höger för att placera elementet i fönstret. Eftersom fasta element ofta svävar bakom eller framför andra element på sidan, kommer Z Index att rangordna fasta element framför andra.

OBS! Det finns en annan typ av positionering i CSS som kallas sticky. Ett klibbigt placerat objekt beter sig som ett relativt placerat objekt tills vi bläddrar till dess behållare (vid en tid som bestäms av toppvärdet). Sedan fixas föremålet (eller fastnar) tills användaren rullar till slutet av behållaren. Den klibbiga positionen kan dock vara lite oförutsägbar eftersom andra faktorer kan hämma funktionaliteten. I Divi är det klibbiga alternativet inte tillgängligt i de inbyggda alternativen av denna anledning. Det finns dock sätt att använda "position: sticky" i Divi.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Hur relativ position "positionerar" ett element på Divi

Som nämnts i förhandsgranskningen liknar den relativa positionstypen den statiska "positionen" eftersom elementet förblir i det normala flödet av dokumentet. Den verkliga skillnaden är att när vi väl har tilldelat ett element till den relativa positionen, har det nu nya alternativ för positionering av elementet. Dessa alternativ inkluderar de övre, nedre, vänstra och högra egenskaperna samt Z Index-egenskapen.

I Divi kan dessa ytterligare positionalternativ hittas under positionsalternativgruppen när den relativa positionen har valts.

Modul med en relativ positionering på divi

Använda förskjutningar med relativ position

Ursprungsoffset- och offset-värdena kommer att fungera tillsammans för att placera vårt element där vi vill ha i moderbehållaren. I det här exemplet har vi en modul som har en relativ position, övre vänster offset, vertikal offset på 25 pixlar och horisontell offset på 25 pixlar. Lägg märke till hur förskjutningsvärdena flyttar elementet bort från förskjutningen ursprungligen horisontellt och / eller vertikalt.

Modul med relativ position 2

Här är samma modul med samma förskjutningar men med ett offset-ursprung längst upp till höger.

Modul med relativ positionsvinkel 2

Här är samma modul med samma förskjutningar och ett offset-ursprung längst ner till höger.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

Och här är samma modul med samma förskjutningar och ett offset-ursprung längst ner till vänster.

Modul med relativ vinkelposition 3

Inget överraskningsavstånd

Med relativ placering förblir elementets faktiska utrymme på sin ursprungliga plats efter att ha flyttat elementet med hjälp av förskjutningar (upp, ner, vänster, höger). Elementets nya position rör sig inte och påverkar inte avståndet mellan resten av elementen på sidan. Den svävar i princip över andra element som en ande som har lämnat sin kropp.

Modul med relativ förskjutningspositionsförklaring

Varför använda relativ position

Skäl 1: Att skapa en överordnad behållare för absolut positionerade element

Detta är förmodligen den mest populära tillämpningen av den relativa positionstypen. Eftersom varje absolut positionerat element är relativt den närmast placerade förfadern kan vi välja att göra en av dess förfäder till ett placerat element helt enkelt genom att ge det en relativ position (standard statisk position är inte tekniskt "positionerad"). Detta håller dokumentflödet på plats (som statisk) och låter oss välja en behållare för absoluta artiklar.

Relativ position 7

Orsak 2: Att flytta objekt utan att påverka andra objekt på sidan.

Med den relativa positionen kan vi använda förskjutningarna för att skjuta elementen i linje utan att påverka de andra elementen. Och med Divi kan vi dra nytta av det rörliga användargränssnittet för att visuellt placera elementen i realtid.

Orsak 3: Att använda Z-index för att överlappa andra element

Som standard kan statiska element inte ordnas om i z-axeln, såvida de inte ges relativ position. En gång i relativ position kommer elementet att förbli placerat i det normala flödet av dokumentet. Först nu har vi möjlighet att dra nytta av Z-indexering för att placera elementen i en viss ordning när de överlappar varandra.

Relativ superposition

Orsak 4: För att undvika att använda negativ marginal för positionssyfte

Relativ positionering lämnar utrymmet i sin ursprungliga position. Men med en negativ marginal flyttas både innehållet och dess ursprungliga utrymme. Om vi ​​till exempel lägger till en negativ toppmarginal i en rad i Divi så att raden överlappar raden ovan, kommer alla rader / innehåll att flyttas med den. Detta lämnar lite röra att rensa upp som kan undvikas genom att använda relativa positionskompenseringar istället.

Om vi ​​ger samma modul en relativ position kan vi använda den vertikala förskjutningen för att höja modulen utan att påverka resten av avståndet på sidan.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

Även om jag ofta har använt negativ marginal för att placera element i Divi är det förmodligen inte en bra idé om vi istället kan använda relativ positionering. Marginalen avser elementets lådmodul, så det är egentligen tänkt att lägga till avstånd i och runt själva elementet, inte så mycket för att placera elementet förskjutet från sin överordnade behållare som för relativ positionering.

För att sammanfatta

Det är mycket troligt att du till slut inte förstod mycket. Den kanske mest överraskande aspekten av att använda relativ position är dess inverkan (eller inverkan) på resten av sidan. Det fungerar inte bara tillsammans med de absoluta elementen, det fungerar också bra med den översatta transformen för att placera elementen på den perfekta platsen.

källa: Elegant Teman

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
1 aktier
del1
tweet
Enregistrer