Zum Inhalt springen

Elementor Z-Index – Was ist das?

teil
mich

Du hast bereits die ersten Erfahrungen mit Elementor sammeln können, bist gerade dabei deine Seite aufzubauen oder hast bereits einige Websites mit Elementor umgesetzt. Und irgendwann stößt du auf dieses ominöse Feld mit dem Z-Index, welches du noch nie benutzt hast und auch beim testen hast du keine Veränderung gesehen. Nun fragst du dich, was ist dieser Z-Index eigentlich und wie stelle ich ihn richtig ein? 

Ich erkläre dir hier, was es genau mit diesem Z-Index auf sich hat, sodass du ihn problemlos in deinen Projekten umsetzen kannst und noch geilere Designs erstellen kannst.

Was ist der Z-Index

Der Z-Index in Elementor beschreibt die Position bzw. Anordnung eines oder mehrerer Objekte auf der Website auf der „Z-Achse“. Je höher der Z-Index, desto weiter vorne befindet sich dieses Objekt in Relation zu anderen an der selben x,y Position.

Um das genauer zu verstehen, werde ich dir das ein mal mathematisch erklären.

Du hast sicherlich im Mathematikunterricht schon mal eine Funktion, wie f(x) = a+b gehabt und durftest diese in einem sogenannten Koordinatensystem aufzeichnen. Dieses Koordinatensystem hatte zwei Achsen, ist also ein 2-dimensionales Koordinatensystem, ähnlich wie du es unten sehen kannst.

Abb. 1. 2-dimensionales Koordinatensystem

Dieses zweidimensionale Koordinatensystem stellt auch die Grundlage für Computerbildschirme dar und ist dir vermutlich besser als Bildschirmauflösung bekannt.

Diese Bildschirmauflösung ist natürlich abhängig von dem Endgerät, der Bildschirmgröße und dem Format. Jedoch folgen alle Auflösungen der selben Struktur BREITE x HÖHE (zB. 1920×1280). Hierbei ist 1920 auf der x-Achse und 1280 auf der y-Achse zu darstellbar.

Und was hat jetzt der Z-Index mit dem ganzen zu tun, wenn man auf dem Bildschirm nur eine zweidimensionale Auflösung hat?

Der Z-Index scheint zwar auf den ersten Blick nicht direkt sinnvoll zu sein, jedoch hat auch dieser Seinen Sinn. In der Mathematik wird die Z-Achse beispielsweise verwendet um ein Objekt im Raum anzuzeigen. Dies kann nun in einem 3-dimensionalen Koordinatensystem angezeigt werden (Siehe Abb.2).

Abbildung 2. 3-dimensionales Koordinatensystem

Um den Z-Index in Elementor nun zu verstehen, müssen wir uns einfach vorstellen, dass wir, wenn wir auf den Bildschirm schauen, direkt auf die Z-Achse schauen und somit eigentlich nur die x und y Koordinaten sehen können.

Wenn zwei Objekte auf der Website optisch außeinander liegen, diese somit unterschiedliche Koordinaten haben, können wir diese leicht als zwei Objekte auseinander halten.

Falls diese Objekte sich nun aber auf der selben Position befinden, kann es unter Umständen sein, dass wir nur ein Objekt sehen, obwohl zwei vorhanden sind.

In diesem Fall möchten wir den Objekten auch sagen können, wo sich diese auf der Z-Achse bzw. in Elementor auf dem Z-Index befinden. Damit stellen wir die Objektreihenfolge in Elementor ein, die auf der Website angezeigt werden soll.

Um dir das ganze noch mal etwas graphischer zu erklären, habe ich dir noch eine kleine Grafik erstellt.

Abbildung 3. Objektreihenfolge in Elementor mit Z-Index

Brauche ich den Z-Index

Ich persönlich verwende den Z-Index ziemlich selten und glaube auch, dass man durchaus ohne diesen bereits sehr schöne und individuelle Design in Elementor gestalten kann.

Eine Überlagerung von Elementen, deren Reihenfolge eine Rolle spielt, findet man am häufigsten auf der Startseite im Header. Doch hier hat man andere Möglichkeiten, wie den Einsatz von Hintergrundbildern oder vorgefertigten Grafiken, um eine hierarchische Darstellung von Objekten zu definieren.

Noch Fragen?

Ich hoffe der Beitrag hat dir geholfen zu verstehen, was der Z-Index in Elementor genau ist und wie du diesen verwenden kannst. Wenn dir noch etwas unklar sein sollte, dann lass mir doch gerne einen Kommentar da und ich werde versuchen deine Frage so schnell wie möglich zu beantworten.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

eugen

eugen

Scrum Master und so. Hab bock auf digitalen Erfolg. Fußball, kochen und digitaler Nomade. Test. 123.

Leave a Replay

Wer bin ich

eugen

eugen

Scrum Master und so. Hab bock auf digitalen Erfolg. Fußball, kochen und digitaler Nomade. Test. 123.

Letzte Beiträge

Lass mir doch nen Follow da!