Z-Index

Geschrieben von: Autor-Avatar Komal Bothra
Autor-Avatar Komal Bothra
Hey, ich bin Komal. Ich schreibe Inhalte, die aus dem Herzen sprechen und dafür sorgen, dass WordPress für Sie funktioniert. Lassen Sie uns Ihre Ideen zum Leben erwecken!
Was ist ein Z-Index 1?

Ein Z-Index ist ein CSS-Attribut, das die vertikale Stapelreihenfolge überlappender HTML-Komponenten beeinflusst und sie für den Betrachter näher erscheinen lässt.

Elemente mit höherem Index werden über Elementen mit niedrigerem Index gestapelt. Der Z-Index funktioniert bei den meisten positionierten Elementen, z. B. bei absoluten, relativen, festen, klebrigen und erblichen Elementen. Mit der Positionseigenschaft können Sie die Positionierung einer Komponente ändern.

Warum Z-Index verwenden?

Komponenten können sich aus verschiedenen Gründen überlappen, beispielsweise wenn sie durch die relative Positionierung über eine andere verschoben werden, ein negativer Rand die Komponente über eine andere gezogen hat oder wenn sich eine ausgerichtete Komponente überlappt.

Komponenten werden in der Reihenfolge gestapelt, in der sie im DOM erscheinen, ohne einen Z-Indexwert. Nicht statische Elemente werden immer über der statischen Standardpositionierung angezeigt. Auch die Verschachtelung spielt eine wichtige Funktion. Wenn sich beispielsweise Komponente A auf Komponente B befindet, kann ein untergeordnetes Element von Komponente B niemals höher sein als Komponente A.

Eigenschaften der Z-Index-Position

Mehrere Positionsparameter bestimmen die Wahl der Elementplatzierungsstrategie eines Webdesigners. Die Positionseigenschaft muss für jedes Objekt, das Sie verschieben möchten, mit einem Z-Index definiert werden. Dies ist einer der Gründe, warum der Z-Index komplex sein kann. 

Die Attribute „oben“, „unten“, „rechts“ und „links“ werden zum Positionieren von Elementen verwendet. Die Eigenschaften funktionieren jedoch erst, wenn die Positionseigenschaft festgelegt ist. Darüber hinaus verhalten sich Eigenschaften je nach Positionswert unterschiedlich.

Wie bereits erwähnt, funktioniert der Z-Index mit sechsstelligen Werten. Werfen wir einen Blick auf jeden von ihnen.

  1. Absolute

Das Element wird aus dem Dokumentfluss entfernt und andere Elemente verhalten sich so, als ob es nicht vorhanden wäre, wobei alle Positionseigenschaften sich darauf auswirken.

  1. Relativ

Die ursprüngliche Position eines Elements bleibt im Dokumentenfluss erhalten, aber der Links-/Rechts-/Oben-/Unten-/Z-Index funktioniert jetzt. Die Positionsattribute geben die Position des Elements an, das in diese Richtung „verschoben“ wird.

  1. Behoben

Das Element wird relativ zum Ansichtsfenster des Benutzers oder zum tatsächlichen Browserfenster positioniert. Daher hat das Scrollen keine Auswirkung.

  1. Klebrig

Der Elementwert wird als relativ betrachtet, bis die Bildlaufposition des Ansichtsfensters einen bestimmten Schwellenwert erreicht. Das Element nimmt nun einen festen Platz ein, an dem es bleiben soll.

  1. Erben

Da die Positionswerte keine Kaskadierung beinhalten, können sie dazu verwendet werden, sie dazu zu zwingen und den Positionierungswert des übergeordneten Elements zu ermitteln.

Wie verwende ich den Z-Index in Elementor?

In Elementor können Sie Z-Index verwenden, indem Sie zum erweiterten Einstellungsmenü einer beliebigen Komponente oder eines beliebigen Elements gehen und einen Wert dafür angeben. Es ist ein Kinderspiel!

Bitte denken Sie daran, dass Sie jeden Z-Index protokollieren müssen, wenn Sie viele Ebenen verwenden möchten. Sie können ziemlich komplizierte überlappende Abschnitte entwerfen, wie wir im nächsten Abschnitt sehen werden, aber zu wissen, welcher Z-Indexwert welchem ​​Element zugewiesen wird, macht die Sache viel einfacher.

Abschluss

Ich hoffe, Sie haben ein grundlegendes Verständnis für die Verwendung von Z-Index für Ihr WordPress Elementor-Webdesign gefunden. Vergessen Sie nicht, sich bei weiteren Fragen an uns zu wenden. Blog-Seite verwandte Artikel zu WordPress-Best Practices, Fehlerbehebungstechniken und anderen Tipps .

Seahawk Media jedoch den besten Service, um Ihre End-to-End-WordPress-Anforderungen zu erfüllen. Kontaktieren Sie uns oder besuchen Sie unsere Blog-Seite für weitere Einblicke.

Verwandte Beiträge

Was ist Farbtönung

Was ist Farbtönung?

Farbe spielt eine wesentliche Rolle in Kunst, Design und Alltag. Es geht über Rot hinaus,

Was ist WordPress Editor

Was ist WordPress Editor

Der WordPress -Editor ist der zentrale Hub für die Erstellung und das Design von Inhalten in einem WordPress

Was ist ein primäres Menü in WordPress

Was ist ein primäres Menü in WordPress?

Wenn Sie gerade begonnen haben, eine WordPress -Site zu erstellen, haben Sie wahrscheinlich den Begriff „Primärmenü“ begegnet.

Beginnen Sie mit Seahawk

Melden Sie sich in unserer App an, um unsere Preise anzuzeigen und Rabatte zu erhalten.