De relatieve positie-eigenschap is misschien wel de meest mysterieuze van de positietypes. Als we echter eenmaal begrijpen hoe het werkt, kunnen we het in ons voordeel gebruiken bij het ontwerpen van lay-outs met Divi. In deze tutorial leer je nieuwe dingen.
In deze zelfstudie behandelen we inderdaad:
- Een overzicht van de vier soorten positionering Divi
- Hoe relatieve positie een element ‘positioneert’ Divi
- 4 redenen die het gebruik van relatieve positie op Divi rechtvaardigen
- Relatieve positie versus marge
- Relatieve positie versus transformeren Vertalen
Presentatie van de vier soorten positionering van Divi
Relatieve positie is een van de vier positietypes die beschikbaar zijn in Divi. Hier is een kort overzicht van elk van hen hieronder.
Statisch (standaard)
Technisch gezien zijn statische elementen niet "gepositioneerd" omdat ze bij de normale stroom of volgorde van elementen op de pagina blijven en ze niet reageren op de eigenschappen boven, rechts, onder en links zoals andere gepositioneerde elementen (daarom er zijn geen offsets beschikbaar in Divi voor elementen in statische/standaardpositie). Wanneer we in Divi de standaardpositie voor een module kiezen, kiezen we de statische positie. Het is ook vermeldenswaard dat sommige Divi-elementen (zoals lijnen en secties) standaard een relatieve positie hebben (geen statische positie).
relatief
Relatief gepositioneerde elementen lijken een beetje op statische elementen omdat ze de normale stroom van de pagina volgen. Het belangrijkste verschil is dat relatief gepositioneerde elementen kunnen worden gepositioneerd met behulp van de eigenschappen boven, onder, links en rechts. In tegenstelling tot statische elementen kunnen ze ook worden gepositioneerd met behulp van de eigenschap Z Index.
Absolu
Een absoluut gepositioneerd element valt uit de normale documentstroom en daardoor ontstaat er geen echte ruimte op de pagina voor het element. We kunnen het zien als een element dat zweeft boven andere elementen op de pagina die echte ruimte innemen. Het wordt gepositioneerd ten opzichte van de dichtstbijzijnde bovenliggende container.
vastgesteld
Net als absolute positie vallen elementen met een vaste positie uit de normale stroom van de pagina en wordt er geen echte ruimte gecreëerd op de pagina. Het belangrijkste verschil tussen absoluut en vast is dat de vaste positie relatief is ten opzichte van het venster of browservenster. Met andere woorden, het maakt niet uit waar het element zich in de normale stroom van de pagina bevindt, zodra het een vaste positie heeft gekregen, zal zijn positie direct aan het browservenster worden gekoppeld. We kunnen de eigenschappen boven, onder, links en rechts gebruiken om het element in het venster te plaatsen. Aangezien vaste elementen vaak achter of voor andere elementen op de pagina zweven, helpt Z Index vaste elementen boven andere te rangschikken.
OPMERKING: Er is een ander type positionering in CSS dat sticky wordt genoemd. Een vastgeplaatst gepositioneerd element gedraagt ​​zich als een relatief gepositioneerd element totdat we naar de container scrollen (op een tijdstip bepaald door de topwaarde). Vervolgens wordt het item gefixeerd (of zit het vast) totdat de gebruiker naar het einde van de container scrolt. De plakkerige positie kan echter een beetje onvoorspelbaar zijn, omdat andere factoren de functionaliteit kunnen belemmeren. In Divi is de sticky-optie om deze reden niet beschikbaar in de ingebouwde opties. Er zijn echter manieren om "position: sticky" in Divi te gebruiken.
Hoe de relatieve positie een element op Divi "positioneert".
Zoals vermeld in het voorbeeld, is het type Relatieve positie vergelijkbaar met statische "positie" omdat het element in de normale stroom van het document blijft. Het echte verschil is dat zodra we een element aan een relatieve positie toewijzen, er nu nieuwe opties beschikbaar zijn voor het positioneren van het element. Deze opties omvatten de eigenschappen Boven, Onder, Links en Rechts, evenals de eigenschap Z Index.
In Divi zijn deze aanvullende positie-opties te vinden onder de positie-optiesgroep zodra de relatieve positie is geselecteerd.
Offsets gebruiken met relatieve positie
De waarden Offset Origin en Offset werken samen om ons element te positioneren waar we willen in de bovenliggende container. In dit voorbeeld hebben we een module met een relatieve positie, een offset linksboven, een verticale offset van 25 pixels en een horizontale offset van 25 pixels. Merk op hoe de offset-waarden het element horizontaal en/of verticaal van de offset-oorsprong zullen verwijderen.
Hier is dezelfde module met dezelfde offsets maar met een offset-oorsprong rechtsboven.
Hier is dezelfde module met dezelfde offsets en een offsetoorsprong rechtsonder.
En hier is dezelfde module met dezelfde offsets en een offset-oorsprong linksonder.
Geen verrassingen op afstand
Bij relatieve positionering blijft de werkelijke ruimte van het element op zijn oorspronkelijke plaats nadat het element is verplaatst met behulp van de offsets (omhoog, omlaag, links, rechts). De nieuwe positie van het element verandert niet en heeft geen invloed op de afstand tussen de rest van de elementen op de pagina. Het zweeft eigenlijk over de andere elementen als een geest die zijn lichaam heeft verlaten.
Waarom relatieve positie gebruiken
Reden 1: Om een ​​bovenliggende container te maken voor absoluut gepositioneerde elementen
Dit is waarschijnlijk de meest populaire toepassing van het type relatieve positie. Aangezien elk absoluut gepositioneerd element relatief is ten opzichte van de dichtstbijzijnde gepositioneerde voorouder, kunnen we ervoor kiezen om van een van zijn voorouders een gepositioneerd element te maken door het simpelweg een relatieve positie te geven (de standaard statische positie is technisch gezien niet "gepositioneerd"). Dit houdt de documentstroom op zijn plaats (als statisch) en stelt ons in staat om een ​​container te kiezen voor absolute elementen.
Reden 2: om elementen te verplaatsen zonder andere elementen op de pagina te beïnvloeden.
Met relatieve positie kunnen we offsets gebruiken om elementen op één lijn te brengen zonder andere elementen te beïnvloeden. En met Divi kunnen we profiteren van de versleepbare gebruikersinterface om elementen in realtime visueel te positioneren.
Reden 3: Z-index gebruiken om andere elementen te overlappen
Statische elementen kunnen standaard niet opnieuw worden gerangschikt in de z-as, tenzij er een relatieve positie aan wordt gegeven. Eenmaal in relatieve positie blijft het element gepositioneerd in de normale stroom van het document. Pas nu hebben we de mogelijkheid om te profiteren van Z-indexering om elementen in een bepaalde volgorde te plaatsen wanneer ze elkaar overlappen.
Reden 4: om te voorkomen dat u een negatieve marge gebruikt voor positiedoeleinden
Bij relatieve positionering blijft de ruimte van de oorspronkelijke positie achter. Met een negatieve marge kan de inhoud en de oorspronkelijke ruimte zijn beide verplaatst. Als we bijvoorbeeld een negatieve bovenmarge aan een rij in Divi toevoegen, zodat de rij de rij erboven overlapt, worden alle rijen / inhoud zal meebewegen. Dit laat wat rommel achter om op te ruimen, wat vermeden zou kunnen worden door in plaats daarvan relatieve positie-offsets te gebruiken.
Als we dezelfde module een relatieve positie geven, kunnen we de verticale offset gebruiken om de module omhoog te brengen zonder dat dit invloed heeft op de rest van de afstand op de pagina.
Hoewel ik vaak een negatieve marge heb gebruikt om elementen in Divi te positioneren, is het waarschijnlijk geen goed idee als we in plaats daarvan relatieve positionering kunnen gebruiken. De marge heeft betrekking op de doosmodule van het element, dus het is eigenlijk bedoeld om ruimte in en rond het element zelf toe te voegen, niet zozeer om het element te positioneren ten opzichte van de bovenliggende container, maar om de relatieve positionering.
Samenvatten
Het is zeer waarschijnlijk dat je aan het einde niet veel hebt begrepen. Misschien wel het meest verrassende aspect van het gebruik van relatieve positie is de impact (of impact) op de rest van het pagina-ontwerp. Dit werkt niet alleen samen met absolute elementen, maar het werkt ook goed met de vertaalde transformatie om elementen op de perfecte plek te positioneren.
bron: elegante thema's
