Verstehen und Verwenden der relativen Position in Divi

Die relative Positionseigenschaft ist vielleicht die mysteriöseste Positionsart. Sobald wir jedoch verstehen, wie es funktioniert, können wir es zu unserem Vorteil nutzen, wenn wir eine Site in Divi entwerfen. Was wir entdecken, kann Sie überraschen.

In diesem Beitrag behandeln wir:

• Ein Überblick über die vier Positionierungsarten von Divi
• Wie die relative Position ein Element in Divi . „positioniert“
• 5 Gründe für die Verwendung der relativen Position in Divi
• Relative Position vs. Marge
• Relative Position vs. Transform Translate

Hör zu!

Überblick über die vier Positionierungsarten von Divi

Die relative Position ist einer von vier in Divi verfügbaren Positionstypen. Hier ist ein kurzer Überblick über jeden unten.

Statisch (Standard)

Statische Elemente sind technisch gesehen nicht „positioniert“, da sie den normalen Fluss oder die normale Reihenfolge der Elemente auf der Seite beibehalten und nicht wie andere positionierte Elemente auf die Eigenschaften oben, rechts, unten und links reagieren (weshalb nein Offsets sind in Divi für Elemente in der statischen/Standardposition verfügbar). Wenn wir in Divi die Standardposition für ein Modul auswählen, wählen wir die statische Position. Es ist auch erwähnenswert, dass einige Elemente in Divi (wie Zeilen und Abschnitte) standardmäßig eine relative Position haben (nicht die statische Position).

Relativ

Relativ positionierte Elemente sind insofern wie statische Elemente, als sie dem normalen Seitenfluss folgen. Der Hauptunterschied besteht darin, dass relativ positionierte Elemente mithilfe der Eigenschaften top, bottom, left und right positioniert werden können. Außerdem können sie im Gegensatz zu statischen Elementen auch mithilfe der Z-Index-Eigenschaft positioniert werden.

Absolut

Ein absolut positioniertes Element bricht aus dem normalen Dokumentenfluss aus und somit wird auf der Seite kein eigentlicher Platz für das Element geschaffen. Wir können es uns als ein Element vorstellen, das über den anderen Elementen auf der Seite schwebt, die tatsächlichen Platz einnehmen. Er wird relativ zum nächstgelegenen übergeordneten Container positioniert.

Fest

Wie die absolute Position brechen Elemente mit fester Position aus dem normalen Seitenfluss aus und haben keinen tatsächlichen Platz innerhalb der Seite. Der Hauptunterschied zwischen absolut und fest besteht darin, dass die feste Position relativ zum Browserfenster oder Ansichtsfenster ist. Mit anderen Worten, egal wo sich das Element im normalen Fluss der Seite befindet, sobald es eine feste Position hat, bezieht sich seine Position nun direkt auf das Browserfenster. Wir können die Eigenschaften top, bottom, left und right verwenden, um das Element im Ansichtsfenster zu positionieren. Da feste Elemente oft hinter oder vor anderen Elementen auf der Seite schweben, hilft Z Index dabei, feste Elemente über anderen anzuordnen.

HINWEIS: Es gibt eine andere Art der Positionierung in CSS, die Sticky genannt wird. Ein klebrig positioniertes Element verhält sich wie ein relativ positioniertes Element, bis wir zu seinem Container scrollen (an einem Punkt, der durch den oberen Wert bestimmt wird). Dann wird das Element fixiert (oder stecken geblieben), bis der Benutzer zum Ende des Containers scrollt. Die Sticky-Position kann jedoch etwas unvorhersehbar sein, da andere Faktoren die Funktionalität beeinträchtigen können. In Divi ist die Sticky-Option aus diesem Grund nicht in den integrierten Optionen verfügbar. Es gibt jedoch Möglichkeiten, „position:sticky“ in Divi zu verwenden.

Wie die Relative Position ein Element in Divi . „positioniert“

Wie in der Übersicht erwähnt, ähnelt der Typ Relative Position der statischen „Position“, da das Element im normalen Fluss des Dokuments (dem HTML auf der Seite) verbleibt. Der eigentliche Unterschied besteht darin, dass, sobald wir einem Element die relative Position zugewiesen haben, nun neue Optionen zum Positionieren des Elements zur Verfügung stehen. Zu diesen Optionen gehören die Eigenschaften oben, unten, links und rechts sowie die Eigenschaft Z-Index.

In Divi finden Sie diese zusätzlichen Positionsoptionen unter der Positionsoptionsgruppe, nachdem die relative Position ausgewählt wurde.

Verwenden von Offsets mit der relativen Position

Der Offset-Ursprung und die Offset-Werte arbeiten zusammen, um unser Element an einer beliebigen Stelle im übergeordneten Container zu positionieren. In diesem Beispiel haben wir ein Modul mit einer relativen Position, einem Offset oben links, einem vertikalen Offset von 25px und einem horizontalen Offset von 25px. Beachten Sie, wie die Versatzwerte das Element horizontal und/oder vertikal vom Versatzursprung wegbewegen.

Hier ist das gleiche Modul mit den gleichen Offsets, aber mit einem Offsetursprung oben rechts.

Hier ist das gleiche Modul mit den gleichen Offsets und einem unteren rechten Offsetursprung.

Und hier ist das gleiche Modul mit den gleichen Offsets und einem Offset-Ursprung unten links.

Keine Abstandsüberraschungen

Bei der relativen Positionierung bleibt der tatsächliche Raum des Elements an seinem ursprünglichen Platz, nachdem das Element mit den Offsets (oben, unten, links, rechts) verschoben wurde. Die neue Position des Elements wird nicht verschoben oder beeinflusst den Abstand der restlichen Elemente auf der Seite. Es schwebt im Grunde über den anderen Elementen wie ein Geist, der seinen Körper verlassen hat.

Gründe für die Verwendung der relativen Position

#1 So rendern Sie einen übergeordneten Container für absolut positionierte Elemente

Dies ist wahrscheinlich die beliebteste Anwendung des relativen Positionstyps. Da jedes absolut positionierte Element relativ zum nächsten positionierten Vorfahren ist, können wir einen seiner Vorfahren zu einem positionierten Element machen, indem wir ihm einfach eine relative Position zuweisen (die statische Standardposition ist technisch gesehen nicht „positioniert“). Dies hält den Dokumentenfluss an Ort und Stelle (wie statisch) und ermöglicht es uns, einen Container für die absoluten Elemente auszuwählen.

#2 Elemente verschieben, ohne die anderen Elemente auf der Seite zu beeinflussen.

Mit der relativen Position können wir die Versätze verwenden, um Elemente in die Ausrichtung zu bringen, ohne andere Elemente zu beeinflussen. Und mit Divi können wir die ziehbare Benutzeroberfläche nutzen, um Elemente visuell in Echtzeit zu positionieren.

#3 So verwenden Sie den Z-Index zum Überlappen anderer Elemente

Standardmäßig können statische Elemente nicht in der Z-Achse neu angeordnet werden, es sei denn, die relative Position wird angegeben. Sobald es sich in der relativen Position befindet, bleibt das Element im normalen Fluss des Dokuments positioniert. Erst jetzt haben wir die Möglichkeit, die Z-Indexierung zu nutzen, um Elemente in einer bestimmten Reihenfolge zu platzieren, wenn sie sich überlappen.

#4 So vermeiden Sie die Verwendung negativer Margen für Positionszwecke

Die relative Positionierung hinterlässt den Raum seiner ursprünglichen Position. Bei einem negativen Rand werden jedoch sowohl der Inhalt als auch sein ursprünglicher Platz verschoben. Wenn wir beispielsweise einer Zeile in Divi einen negativen oberen Rand hinzufügen, sodass die Zeile die Zeile darüber überlappt, werden alle Zeilen/Inhalte mit nach oben verschoben. Dies hinterlässt ein wenig Chaos beim Bereinigen, das vermieden werden könnte, indem stattdessen die relativen Positionsoffsets verwendet werden.

Hier ist eine Illustration, was passiert, wenn wir einen negativen oberen Rand verwenden, um ein Modul nach oben zu verschieben. Beachten Sie, wie die restlichen Elemente unten damit angesprochen werden.

Wenn wir demselben Modul eine relative Position zuweisen, können wir den vertikalen Versatz verwenden, um das Modul nach oben zu bringen, ohne dass sich dies auf den restlichen Abstand auf der Seite auswirkt.

Obwohl ich oft einen negativen Rand verwendet habe, um Elemente in Divi zu positionieren, ist es wahrscheinlich keine gute Idee, stattdessen die relative Positionierung zu verwenden. Margin bezieht sich auf das Box-Modul des Elements, so dass es wirklich dazu gedacht ist, Abstände in und um das Element selbst hinzuzufügen, nicht so sehr, um das Element versetzt von seinem übergeordneten Container zu positionieren, wie bei der relativen Positionierung.

Relative Position vs. Transform Translate

Die relative Position ist der Verwendung von transform translate zum Positionieren von Elementen auf einer Seite sehr ähnlich. Beide verschieben das Element, während der eigentliche Platz an seinem ursprünglichen Platz belassen wird und die anderen Elemente auf der Seite nicht beeinflusst werden.

Übersetzen ist besser für Animationen und Übergänge (wie Hover-Effekte)

Es scheint jedoch, dass Translate am besten für Animationen und Übergänge (wie Hover-Effekte) geeignet ist, da es schnellere und glattere Übergänge bietet. Die Verwendung des oberen, unteren, linken und rechten Versatzes zum Animieren oder Übergehen eines relativen Elements könnte abgehackter sein und unseren Browser dazu bringen, härter zu arbeiten, als er benötigt.

Relative Längeneinheiten reagieren unterschiedlich

Wenn wir relative Längeneinheiten (wie % oder vw) für Responsive Design verwenden, funktionieren diese mit relativer Position und Transformationsübersetzung anders.

Ein Divi-Modul mit einer relativen Position und einem horizontalen Versatz von 50 % verschiebt das Modul horizontal um den Betrag, der 50 % der Breite des übergeordneten Containers (oder der Spalte) entspricht.

Ein Divi-Modul mit einer Transformationsverschiebung (X-Achse) von 50 % verschiebt das Modul horizontal um den Betrag, der 50 % der Breite des Moduls selbst entspricht.

Kombinieren von relativer Position und Transformieren in Mittelelemente umwandeln

Wie wir gerade besprochen haben, ist die relative Position relativ zum übergeordneten Element und die Eigenschaft transform translate relativ zum Element selbst. Aus diesem Grund können wir beides in Kombination verwenden, um Elemente ganz nach unseren Wünschen zu positionieren. Wir können diese Technik sogar verwenden, um Elemente in ihrem Container zu zentrieren.

Zum Beispiel können wir den horizontalen Offset der relativen Position verwenden, um das Modul genau 50 % der Spaltenbreite rechts zu positionieren.

Verwenden Sie dann die Eigenschaft translate, um das Modul um 50% (der Modulbreite) nach links zu verschieben. Dadurch wird sichergestellt, dass das Modul unabhängig von der Breite des Moduls in der Mitte der Spalte bleibt.

Abschließende Gedanken

Wenn Sie so sind wie ich, bevor Sie diesen Artikel geschrieben haben, haben Sie den relativen Positionstyp wahrscheinlich nicht sehr gut verstanden oder verwendet. Der vielleicht überraschendste Aspekt dieser relativen Position ist, wie sie den Rest des Designs auf der Seite beeinflusst (oder nicht beeinflusst). Es funktioniert nicht nur zusammen mit den absoluten Elementen, sondern funktioniert auch gut mit Transform Translate, um Elemente an der perfekten Stelle zu positionieren.

Welche Erfahrungen haben Sie mit dem relativen Positionstyp gemacht?

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!