Absolute

Absolute Positionierung in Divi: Ein umfassender Leitfaden

Die absolute Positionierung ist eine der zentralen Eigenschaften, die in Divi zur Verfügung stehen, um Elemente auf einer Website präzise zu platzieren. In diesem Artikel erfahren Sie, was es bedeutet, ein Element in Divi absolut zu positionieren, und wie Sie diese Technik für Ihre Webdesign-Projekte optimal nutzen können.

Überblick über die Positionierung in Divi

Divi bietet insgesamt vier Haupttypen der Positionierung: Statisch, Relativ, Absolut und Fixiert. Jeder Typ hat seine eigenen Eigenschaften und Anwendungsmöglichkeiten.

• Statisch (Standard): Elemente in statischer Position folgen dem normalen Fluss der Seite. Sie reagieren nicht auf Positionierungsangaben wie oben, unten, links oder rechts, wodurch auch keine Versatzwerte zur Verfügung stehen.

• Relativ: Relativ positionierte Elemente folgen ebenfalls dem normalen Fluss der Seite, können jedoch mit den Positionseigenschaften oben, unten, links und rechts relativ zu ihrem ursprünglichen Standort verschoben werden. Zudem kann die Z-Index-Eigenschaft zur Überlagerung genutzt werden.

• Absolut: Ein absolut positioniertes Element bricht aus dem normalen Fluss der Seite aus und beansprucht keinen physischen Platz. Diese Elemente werden relativ zum nächstgelegenen positionierten Elterncontainer dargestellt.

• Fixiert: Ähnlich wie die absolute Positionierung ist die fixe Position nicht Teil des normalen Flusses; jedoch bleibt ein fixes Element in Relation zum Browserfenster. Das bedeutet, dass die Position unabhängig vom Scrolling der Seite bleibt.

Wie funktioniert die absolute Positionierung in Divi?

Eine absolut positionierte Komponente orientiert sich an dem nächstgelegenen Elternteil, der eine andere Position als statisch hat. In der Regel sollten Sie einem Container, in dem sich ein Modul befindet, einen relativ gesetzten Stil geben. Andernfalls wird die Position des Moduls auf Grundlage des nächstgelegenen Vorfahren ermittelt, der eine Positionsangabe hat.

Ein Beispiel: Wenn Sie ein Modul in einer Spalte absolut positionieren möchten, sollten Sie dafür sorgen, dass die Spalte selbst relativ positioniert ist. Sollte die Spalte jedoch auf statisch gesetzt sein, wird das Modul relativ zur darüberliegenden Zeile positioniert, die standardmäßig relativ positioniert ist.

Vorteile der absoluten Positionierung

Die absolute Positionierung bietet eine Reihe von Vorteilen:

• Gestaltungsmöglichkeiten: Durch das Herausbrechen aus dem normalen Fluss der Seite können Sie Elemente ohne Einfluss auf die existierende Struktur hinzufügen. Dies ermöglicht eine größere Flexibilität, wenn es darum geht, Designs zu erweitern.

• Alternative zu Float und Margins: Absolute Positionierung ermöglicht es, Positionierung ohne das potenziell unzuverlässige Float-System und ohne komplexe Margenwerte durchzuführen. Dies erleichtert die präzise Platzierung von Elementen.

• Browserunterstützung: Die absolute Positionierung ist mit allen gängigen Browsern kompatibel, was die Wahrscheinlichkeit verringert, dass das Design auf verschiedenen Plattformen beeinträchtigt wird.

Nachteile der absoluten Positionierung

Trotz ihrer Vorteile hat die absolute Positionierung auch einige Herausforderungen:

• Isolationsrisiko: Absolut positionierte Elemente existieren außerhalb des Flusses der Seite, was es schwierig macht, sie in Bezug auf andere Elemente zu platzieren. Wenn Sie beispielsweise einen Button unter einem Textmodul hinzufügen möchten, muss auch der Button absolut positioniert werden, um ihn unter dem Text zu platzieren.

• Weniger responsiv: Die Herausforderung, responsive Designs umzusetzen, kann bei absolut positionierten Elementen auftreten, da sie nicht im Verzeichnis der Elemente fließen. Entwickler neigen dazu, von der Nutzung der absoluten Positionierung abzusehen, wenn eine responsive Gestaltung erforderlich ist.

Elemente präzise mit absoluter Positionierung anpassen

Divi bietet Schnittstellen, um die Position von Elementen schnell und effektiv zu beeinflussen. Sie können einfach vortrefflich Positionierungspunkte auswählen und sowohl vertikale als auch horizontale Anpassungen vornehmen.

Die Standardeinstellung für die Positionierung ist oben links. Wenn Sie also den vertikalen Offset erhöhen, rücken Sie das Element nach unten. Um effizienter mit zentrierten Elementen umzugehen, nutzt Divi eine Kombination von CSS, um diese immer mittig auszurichten, unabhängig von der Größe des Elements. Beispielsweise könnte die CSS-Konfiguration für ein zentriertes Element so aussehen:

css
position: absolute!important;
top: 50%;
transform: translateY(-50%);

Die Positionierung wird so umgesetzt, dass das Element vertikal zentriert wird und dabei gleichzeitig an jeweilige Höhe optimiert wird.

Anwendung der Transform-Funktion zur Anpassung mehrerer Elemente

Wenn Sie ein vertikal und horizontal zentriertes Element definiert haben, können Sie mithilfe der Transform-Optionen zusätzliche Anpassungen vornehmen, ohne die Breite oder Höhe der Elemente kennen zu müssen.

Ein Beispiel ist, wenn Sie mehrere Module in einer Spalte zentrieren möchten. Sie können die Transformationswerte für jedes Element setzen und diese nach Bedarf justieren. Wenn Sie das transform-Eigenschaft zur Anpassung verwenden, bleiben Sie innerhalb der prozentualen Werte, sodass Sie nichts an der Übersichtlichen Gestaltung verlieren und trotzdem flexibel agieren können.

Praktische Beispiele für die Anwendung der absoluten Positionierung

Ein praktisches Beispiel wäre die Verwendung einer absolut positionierten Schaltfläche innerhalb einer Spalte, um sicherzustellen, dass diese immer am unteren Ende der Spalte bleibt, egal wie viel Inhalt sich darüber befindet. Dies sorgt dafür, dass die Benutzeroberfläche übersichtlich bleibt.

Sie starten damit, eine einspaltige Zeile hinzuzufügen und ein Blurb-Modul in die Spalte zu setzen. Nachfolgend platzieren Sie eine Schaltfläche. Durch die Duplikation der Spalte erhalten Sie mehrere Spalten, die gleichartig strukturiert sind.

Das Einrichten der Höhe der Spalten sollte so erfolgen, dass alle gleich hoch sind. Dies wird durch die Funktion „Spaltenhöhe anpassen“ in Divi erreicht. Wenn Sie nun unterschiedliche Inhalte in den Blurb-Modulen eingeben, wird die Schaltfläche unter dem jeweiligen Inhalt entsprechend positioniert.

Um die Schaltfläche absolut zu positionieren, setzen Sie in den Einstellungen Folgendes:

• Position: Absolut
• Positionierung: Unten links

Diese Einstellungen stellen sicher, dass die Schaltfläche bequem am unteren Ende der Spalte bleibt. Um Überlappungen innerhalb der Spalte zu verhindern, sollten Sie zusätzlich Polsterungen hinzufügen.

Hierbei ist das Ziel, ein konsistentes Erscheinungsbild von Inhalten und Schaltflächen zu gewährleisten, egal wie der Inhalt der einzelnen Module variiert.

Durch diese Techniken können Sie sicherstellen, dass Ihre Verwendung von absolut positionierten Elementen nicht nur ästhetisch ansprechend ist, sondern auch zu einer funktionalen und benutzerfreundlichen Website führt.

Abschließend lässt sich sagen, dass die absolute Positionierung in Divi ein kraftvolles Werkzeug ist, das einmalig beherrscht werden muss, um präzise und flexible Designgrundsätze auf Ihrer Website zu realisieren. Mit der entsprechenden Handhabung kann sie Ihrem Webdesign eine neue Dimension der Kreativität verleihen.