Ein Leitfaden zum Verstehen und Verwenden der absoluten Position von Divi

Die absolute Positionseigenschaft ist einer von vier Hauptpositionstypen, die in den neuen Positionsoptionen von Divi verfügbar sind. In diesem Tutorial werden wir untersuchen, was es bedeutet, einem Element eine absolute Position in Divi zu geben und wie Sie dies bei der Gestaltung von Divi-Sites zu Ihrem Vorteil nutzen können.

In diesem Beitrag behandeln wir:

• Ein Überblick über die vier Positionierungsarten von Divi
• Wie die absolute Position ein Element in Divi . „positioniert“
• Vorteile und Nachteile der Verwendung der absoluten Position in Divi
• Verwenden der Positionspunkte mit der absoluten Position
• Anwendungsbeispiel: Schaltflächen für Blurbs mit gleicher Höhe absolut positionieren

Hör zu!

Überblick über die vier Positionierungsarten von Divi

Die absolute Position ist eine von vier in Divi verfügbaren Positionsoptionen. 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). Die statische Position ist die Standardposition für jedes CSS-Element. Wenn Sie in Divi die Standardposition für ein Modul auswählen, wählen Sie 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. Sie können es sich 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. Sie 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 Sie 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 Absolute Position ein Element in Divi . „positioniert“

Wie in der Übersicht erwähnt, wird ein absolut positioniertes Element relativ zum nächsten positionierten übergeordneten Container positioniert. Ein positionierter übergeordneter Container ist jeder Container, dem ein Positionswert gegeben wird, der nicht statisch ist (dh relativ, absolut, fest). Wenn Sie also ein Element (wie ein Modul) absolut innerhalb seines übergeordneten Containers (oder seiner Spalte) positionieren möchten, sollten Sie der Spalte in den meisten Fällen eine relative Position zuweisen, bevor Sie das untergeordnete Modul absolut positionieren. Wenn nicht, sucht das absolut positionierte Modul weiter oben im Dokument/auf der Seite nach dem nächsten Vorfahren mit einer anderen Position als statisch. Aus diesem Grund haben in Divi sowohl Abschnitte als auch Zeilen standardmäßig die relative Position, sodass Sie Elemente problemlos absolut innerhalb dieser Elemente positionieren können.

Hier ist eine Illustration, was das absolut positionierte Modul tun wird, wenn ich die Standardposition von Divi für eine Spalte überschreibe und sie auf statisch setze. Beachten Sie, dass das Modul jetzt relativ zu der Zeile wird, die eine Position (relativ) hat, da die Spalte keine Position mehr hat.

Vor- und Nachteile der Verwendung der absoluten Position in Divi

Die absolute Position ist nur eine der verschiedenen Methoden zur Positionierung von Elementen. Daher wäre es nützlich, einige der Vor- und Nachteile der Verwendung der absoluten Position anstelle anderer zu behandeln.

Leistungen

Hier sind einige Vorteile der Verwendung der absoluten Position gegenüber anderen Positionierungseigenschaften wie Transform Translate oder Margins:

Gutes Design-Tool

Absolute Position Unterbricht den normalen Fluss, sodass der tatsächliche Raum des Elements das Design nach der Positionierung nicht beeinflusst. Obwohl dies auch ein Nachteil sein kann, kann dies immer dann von Vorteil sein, wenn Sie Elemente zu einem bereits erstellten Design hinzufügen möchten, ohne dass zusätzliche Reinigung erforderlich ist, um dem Layout zusätzlichen Platz zu verleihen. Mit anderen Worten, Sie können der Seite Elemente hinzufügen, ohne dafür vorhandene Elemente verschieben zu müssen.

Eine gute Alternative zu Floats und Margins

Bei der absoluten Position müssen Sie sich nicht auf schwebende Elemente oder die Verwendung von Rändern verlassen, um eine ähnliche Positionierung zu erreichen. Obwohl es keine native Option in Divi ist, wissen diejenigen, die mit CSS vertraut sind, dass Sie Floats verwenden können, um Elemente rechts oder links zu positionieren, was in einigen Fällen etwas fehlerhaft und unvorhersehbar sein kann. Das gleiche gilt für die Verwendung von Rändern zum Positionieren von Elementen. Manchmal ist es schwierig, die genauen Randwerte vorherzusagen, um ein Element genau richtig zu positionieren, ohne unnötige Abstände zu hinterlassen. Die Verwendung einer absoluten Position kann sowohl für Floats als auch für Margins eine gute Alternative zur „genauen Positionierung“ sein.

Gute Browserunterstützung

Die absolute Positionseigenschaft wird von allen gängigen Browsern weitgehend unterstützt, sodass Sie normalerweise darauf vertrauen können, dass sie in anderen Browsern nicht unerwartet kaputt geht.

Nachteile

Im Folgenden sind einige Nachteile aufgeführt, die bei der Verwendung der absoluten Position zu berücksichtigen sind:

Isolationsgefahr

Da absolut positionierte Elemente aus dem normalen Dokumentenfluss herausbrechen, kann es schwierig sein, zusätzliche Elemente in der Nähe hinzuzufügen. Sie werden von anderen Elementen auf der Seite isoliert. Wenn Sie beispielsweise in Divi normalerweise eine Schaltfläche unter einem Textmodul hinzufügen möchten, können Sie einfach ein Modul hinzufügen und es befindet sich automatisch unter dem Textmodul. Wenn das Textmodul jedoch absolut positioniert wurde, müssten Sie auch das Schaltflächenmodul absolut positionieren und dann die Eigenschaften top, bottom, left und right verwenden, um die Schaltfläche unter dem Textmodul zu positionieren. Es könnte jedoch einfacher sein, eine Spalte (den übergeordneten Modulcontainer) absolut so zu positionieren, dass alle Module innerhalb der Spalte dem normalen Dokumentenfluss folgen können (z. B. das Positionieren einer Gruppe von Modulen statt eines).

Weniger reaktionsschnell

Auch weil absolut positionierte Elemente aus dem Dokumentenfluss ausbrechen, kann es schwierig sein, die Positionierung für mobile Geräte ansprechend zu gestalten. Tatsächlich vermeiden viele Entwickler position:absolute aufgrund der Herausforderungen, die mit Responsive Design einhergehen. Daher ist es wichtig, bei Bedarf relative Längeneinheiten (wie vw oder %) anstelle von absoluten Längeneinheiten (wie px) zu verwenden.

Verwenden der Positionspunkte mit der absoluten Position

Die in den Divi-Builder integrierten Positionspositionsoptionen machen es wirklich einfach, Elemente ganz einfach durch Klicken auf einen Positionspunkt zu positionieren. Nachdem der Positionspunkt ausgewählt wurde, können Sie die vertikalen und horizontalen Versätze verwenden, um zusätzliche Positionsanpassungen von diesem Positionspunkt aus vorzunehmen.

Standardmäßig wird der Positionspunkt oben links gesetzt. Wenn Sie also die vertikalen und horizontalen Versätze an dieser Position hinzufügen, wird ein zusätzlicher Abstand von oben und von links hinzugefügt.

Von der Position in der oberen rechten Ecke fügt der vertikale Versatz Platz von oben hinzu und der horizontale Versatz fügt rechts Platz hinzu.

Von der Position in der unteren rechten Ecke fügt der vertikale Versatz Platz von unten hinzu und der horizontale Versatz fügt rechts Platz hinzu.

Von der Position in der unteren linken Ecke fügt der vertikale Versatz Abstand von unten hinzu und der horizontale Versatz fügt Abstand von links hinzu.

Anpassungen an zentrierten absoluten Elementen vornehmen

Immer wenn Sie eine Positionsoption mit einer zentrierten Position auswählen, verwendet Divi eine Kombination von CSS-Eigenschaften, um sicherzustellen, dass das Element unabhängig von der Größe perfekt zentriert ist. Wenn Sie beispielsweise die Position links zentriert auswählen, positioniert Divi das Element wie folgt:

So sieht das CSS im Backend aus.

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

The top:50% ist dazu da, die Oberseite des Elements genau 50% von der Oberseite seines Containers zu positionieren. Die transform:translateY(-50%) ist dazu da, das Element genau um die Hälfte seiner eigenen Höhe nach oben zu bringen. So erhalten Sie unabhängig von der Höhe ein perfekt platziertes Element.

Dies ist wichtig, wenn Sie zusätzliche Anpassungen (oder Offsets) an einem Element in einer zentrierten Position vornehmen möchten. Sie möchten nicht den Fehler begehen, die Transformationsübersetzungsoption zu verwenden, ohne die bereits verwendeten Werte zu kennen. Aus diesem Grund ist es am besten, kleinere Anpassungen mit der Eigenschaft margin in Divi vorzunehmen, anstatt zu transformieren translate, es sei denn, Sie verstehen, was Sie tun.

Verwenden der Transform-Translation-Option zum Positionieren mehrerer absoluter Elemente für die zentrierte Position

Wenn Sie verstehen, wie transform:translate verwendet wird, kann es tatsächlich sehr nützlich sein, um zentrierte Elemente zu versetzen, ohne die Breite des Elements kennen zu müssen.

Angenommen, Sie positionieren ein Modul sowohl vertikal als auch horizontal mit einer Spalte in Divi. Es würde so aussehen.

Wenn ich dem Element eine Transformationsübersetzung wie folgt gegeben habe, ändert sich nichts:

• Transformieren Übersetzen (Y): -50%
• Transformieren Übersetzen(X): -50%

Dies liegt daran, dass Divi dies bereits automatisch im Backend für Sie erledigt. Wenn Sie dies wissen, können Sie Anpassungen von der Mittelpunktposition aus vornehmen, indem Sie die Transformationsübersetzungsoption verwenden. Und wenn Sie die prozentuale Längeneinheit verwenden, müssen Sie die Breite oder Höhe des Moduls nicht kennen, um Anpassungen vorzunehmen, da 100 % der Breite oder Höhe des Moduls entspricht. Wenn Sie also vier Module zur Mitte der Spalte hinzufügen möchten, können Sie die Transformationsoptionen verwenden, um jedes der absolut positionierten Module zu versetzen.

Dazu würden Sie vier Module erstellen und ihnen alle eine absolute Position mit einer vertikal und horizontal zentrierten Position geben.

Verwenden Sie dann die Transformationsübersetzungsoptionen, um die Position der Module entsprechend dem Prozentsatz der Breite und Höhe des Moduls entsprechend anzupassen. Wenn Sie beispielsweise einem Modul einen Transformationswert der Y-Achsenverschiebung von -100 % geben, wird das Modul auf die genaue Höhe des Moduls nach oben gebracht. Wenn Sie dem Modul einen X-Achsen-Wert von -100% geben, wird das Modul um die genaue Breite des Moduls nach links verschoben. Dies kann eine großartige Möglichkeit sein, Elemente zu kombinieren, die absolut zentriert sind.

Anwendungsbeispiel: Schaltflächen für Blurbs mit gleicher Höhe absolut positionieren

Eine praktische Anwendung der Verwendung der absoluten Position in Divi besteht darin, einer Schaltfläche eine absolute Position innerhalb einer Spalte zuzuweisen, sodass die Schaltfläche am unteren Rand der Spalte bleibt, auch wenn sich die Menge (oder Höhe) des darüber liegenden Inhalts ändern kann. Dies kann eine großartige Möglichkeit sein, das Design einheitlich zu halten, wenn Elemente auf Ihrer Seite angezeigt werden.

So geht's.

Fügen Sie dem Abschnitt zunächst eine einspaltige Zeile hinzu.

Fügen Sie dann der Spalte ein Klappenmodul hinzu.

Fügen Sie als Nächstes ein Schaltflächenmodul unter dem Klappenmodul hinzu.

Öffnen Sie die Zeileneinstellungen und duplizieren Sie die Spalte zweimal, um insgesamt drei identische Spalten mit jeweils demselben Klappen- und Schaltflächenmodul zu erhalten.

Gehen Sie dann zu den Zeileneinstellungen und wählen Sie die Option zum Angleichen der Spaltenhöhen. Dadurch wird sichergestellt, dass sich die Spalten an die Höhe der Spalte mit der größten Höhe (oder dem meisten Inhalt) anpassen.

Aktualisieren Sie nun den Textkörperinhalt jedes der Klappenmodule, sodass sich die Inhaltsmenge für jede Spalte unterscheidet. Sie sollten sehen, dass die Schaltfläche unten an die Position direkt unter dem Klappenmodul verschoben wird, wodurch sich jede der Schaltflächen an einer anderen Position innerhalb der Spalte befindet.

Wählen Sie mit der Mehrfachauswahl jedes der Schaltflächenmodule aus und aktualisieren Sie die folgenden Elementeinstellungen für jede der Schaltflächen:

• Position: Absolut
• Ort: Unten links

Dadurch wird jede der Schaltflächen absolut links unten in der Spalte positioniert. Da sich die Schaltflächen jetzt jedoch außerhalb des normalen Flusses der Elemente auf der Seite befinden, werden Sie feststellen, dass es einige Überschneidungen mit der Schaltfläche und dem Klappenmodul in der Spalte ganz links gibt. Um dies zu beheben, müssen wir einfach etwas Platz für die Schaltfläche schaffen, indem wir der Spalte wie folgt etwas Auffüllen hinzufügen:

• Polsterung: 50px unten

Jetzt haben Sie drei vorgestellte Elemente mit einer einheitlichen Schaltflächenplatzierung für jedes, auch wenn sich die Menge des Inhalts (oder die Höhe des Klappentextes) ändern kann.

Abschließende Gedanken

Ich hoffe, dieser Beitrag hat etwas Licht in die absolute Positionseigenschaft gebracht und wie mächtig sie in Divi verwendet werden kann. Sobald Sie verstehen, wie die Position funktioniert, können Sie alle möglichen präzisen Designelemente hinzufügen, die Ihre Website auf die nächste Stufe heben.

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

Danke schön!