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.
- 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.
- 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.
- Behoben
Das Element wird relativ zum Ansichtsfenster des Benutzers oder zum tatsächlichen Browserfenster positioniert. Daher hat das Scrollen keine Auswirkung.
- 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.
- 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.
