Die Z-Index-CSS-Eigenschaften: Eine umfassende Übersicht
Die meisten CSS-Eigenschaften sind sehr einfach zu bewältigen. Oft Anwenden einer CSS-Eigenschaft auf ein Element im Markup wird haben sofortige Ergebnisse –, sobald Sie die Seite aktualisieren, die für die Eigenschaft festgelegten Wert wirksam wird, und Sie das Ergebnis sofort sehen. Anderen CSS-Eigenschaften, jedoch ein wenig komplexer werden und nur arbeiten im Rahmen einer bestimmten Konstellation von Bedingungen. Von Louis Lazaris SmashingMagazine
Z-Index CSS-Eigenschaften
Die Z-index
Eigenschaft gehört zu der letzteren Gruppe. Z-index
hat zweifellos so viel Verwirrung und Frustration wie alle anderen CSS-Eigenschaft verursacht. Ironischerweise, jedoch, wenn Z-index
ist vollständig, versteht es eine sehr einfache Eigenschaft verwendet werden, und bietet eine effektive Methode zur Überwindung viele Layout-Herausforderungen.
In diesem Artikel werden wir genau, was erklären Z-index
ist, wie es missverstanden worden ist, und besprechen wir einige praktischen Verwendungsmöglichkeiten für es. Wir werden auch einige der Browser Unterschiede beschreiben, die auftreten können, besonders in früheren Versionen von Internet Explorer und Firefox. Diese umfassenden Blick auf Z-index
sollten Entwickler eine ausgezeichnete Grundlage um diese Eigenschaft sicher und effektiv verwenden zu können bieten.
Was ist es?
Die Z-index
-Eigenschaft bestimmt die Stack-Ebene der ein HTML-Element. “stack Level” verweist auf die Position des Elements auf derZ-Achse (im Gegensatz zu der x-Achse oder Y-Achse Achse). Eine höhere Z-index
Wert bedeutet, dass das Element an den Anfang der Stapelreihenfolge näher sein wird. Diese Stapelreihenfolge wird senkrecht zur das Display oder Ansicht ausgeführt.
3-dimensionale Darstellung der Z-Achse:
Um zu zeigen deutlich wie Z-index
Werke, übertreibt Bild oben die Anzeige der gestapelten Elemente in Bezug auf die Ansicht.
Der natürliche Stacking-Orden
In einer HTML-Seite wird die natürliche Stapelreihenfolge (d. h. die Reihenfolge der Elemente auf der Z-Achse) durch eine Reihe von Faktoren bestimmt. Unten ist eine Liste zeigt der Reihenfolge dieser Elemente in einem Stapel Kontext, beginnend mit der Unterseite des Stapels passen. Diese Liste wird davon ausgegangen, dass keine Objekte verfügt Z-index
angewendet:
- Hintergrund und Grenzen des Elements, die Stapeln Kontext einrichten
- Elemente mit negativen stacking Kontexte, in der Reihenfolge der Darstellung
- Nicht-positioniert, nicht verschiebbar, Blockebenen-Elemente, in der Reihenfolge der Darstellung
- Nicht-positioniert, gefloatete Elemente, in der Reihenfolge der Darstellung
- Inline-Elemente, in der Reihenfolge der Darstellung
- Positionierte Elemente, in der Reihenfolge der Darstellung
Die Z-index
Eigenschaft, wenn richtig angewendet kann diese natürliche Stapelreihenfolge ändern.
Die Stapelreihenfolge der Elemente ist natürlich nicht offensichtlich, es sei denn, Elemente positioniert sind, so, dass Sie einander überlappen. Somit können um die natürliche Stapelreihenfolge zu sehen, negative Ränder verwendet werden wie unten dargestellt:
Graue Box
Blue-Box
Gold Box
Die oben genannten Felder sind verschiedene Hintergrund- und Rahmenfarben gegeben, und die letzten beiden sind eingerückt und negative oberen Ränder gegeben, so dass Sie die natürliche Stapelreihenfolge sehen können. Das graue Feld zweite ersten im Markup, die Blue-Box angezeigt, und das Gold im dritten Feld. Die angewandte negative Ränder zeigen deutlich diese Tatsache. Diese Elemente verfügen nicht über Z-index
Werte Satz; Ihre Stapelreihenfolge ist die natürliche oder Standard, bestellen. Die Überschneidungen, die auftreten, sind auf die negative Ränder zurückzuführen.
Warum wird es Ursache Verwirrung?
Obwohl Z-index
ist keine schwierige Eigenschaft zu verstehen, aufgrund von falschen Annahmen, die es Verwirrung für den Beginn Entwickler führen kann. Diese Verwirrung tritt auf, weil Z-index
wird nur auf ein Element dessen arbeiten Position
Eigenschaft explizit festgelegt wurde zu absolute
, behoben
, oder relative
.
Zeigen Z-index
nur Werke auf Elemente positioniert, sind hier die gleichen drei Felder mit Z-index
Werte, um zu versuchen, Ihre Stapelreihenfolge reverse angewendet:
Graue Box
Blue-Box
Gold Box
Das graue Feld hat eine Z-index
der Wert “9999″; die Blue-Box hat eine Z-index
der Wert “500″; und das gold Feld hat eine Z-index
Wert von “1″. Logisch, würde Sie davon ausgehen, dass die Stapelreihenfolge von diese Felder jetzt rückgängig gemacht werden sollte. Aber das ist nicht der Fall, da keine dieser Elemente hat die Position
-Eigenschaft festgelegt.
Hier sind die gleichen Felder mit Position: relative
Jeder, hinzugefügt und Ihre Z-index
Werte, die gepflegt:
Graue Box
Blue-Box
Gold Box
Jetzt ist das Ergebnis wie erwartet: die Stapelreihenfolge der Elemente wird umgekehrt; das graue Feld überlappt die Blue-Box und die Blue-Box überlappt das Gold.
Syntax
Die Z-index
Eigenschaft kann die Stapelreihenfolge der Block-Level und Inline-Elemente auswirken und wird durch eine positive oder negative Ganzzahl-Wert oder einen Wert von deklariert Auto
. Der Wert Auto
gibt dem Element die gleichen Stapelreihenfolge als übergeordnetes Element.
Hier ist der CSS-Code für das dritte Beispiel oben, wo die Z-index
Eigenschaft ist korrekt angewendet:
view plaincopy to clipboardprint?
- #grey_box {
- width: 200px;
- height: 200px;
- border: solid 1px #ccc;
- background: #ddd;
- position: relative;
- z-index: 9999;
- }
- #blue_box {
- width: 200px;
- height: 200px;
- border: solid 1px #4a7497;
- background: #8daac3;
- position: relative;
- z-index: 500;
- }
- #gold_box {
- width: 200px;
- height: 200px;
- border: solid 1px #8b6125;
- background: #ba945d;
- position: relative;
- z-index: 1;
- }
# Grey_box {Breite: 200px; Höhe: 200px; Grenze: solide 1px #ccc; Hintergrund: #ddd; Position: Relative; Z-Index: 9999;} # Blue_box {Breite: 200px; Höhe: 200px; Grenze: 1px solid # 4a7497; Hintergrund: # 8daac3; Position: Relative; Z-Index: 500;} # Gold_box {Breite: 200px; Höhe: 200px; Border: 1px solid # 8b6125; Hintergrund: # ba945d; Position: Relative; Z-Index: 1;}
Erneut, es kann nicht sein betont genug, vor allem für Anfang CSS Entwickler, dass die Z-index
Eigenschaft wird nicht funktionieren, es sei denn, es zu einem positionierten Element angewendet wird.
JavaScript-Verwendung
Wenn Sie beeinflussen möchten die Z-index
Wert eines Elements dynamisch über JavaScript, die Syntax ist ähnlich wie die meisten anderen CSS-Eigenschaften über “Camel Gehäuse” zu ersetzen, die getrennt CSS-Eigenschaften, wie im nachstehenden Code zugegriffen werden:
view plaincopy to clipboardprint?
- var myElement = document.getElementById(“gold_box”);
- myElement.style.position = “relative”;
- myElement.style.zIndex = “9999”;
Var MyElement = document.getElementById("gold_box"); myElement.style.position = "relativen"; myElement.style.zIndex = "9999";
In den obigen Code wird die CSS-Syntax “Z-Index” “zIndex”. In ähnlicher Weise “Background-Color” wird “BackgroundColor”, “Font-Weight” zur “FontWeight”, und So weiter.
Außerdem wird die Position-Eigenschaft geändert mit, dass den obigen Code erneut betonen, daß Z-index
funktioniert nur auf Elemente, die positioniert sind.
Fehlerhafte Implementierungen in IE und Firefox
Unter bestimmten Umständen, es gibt einige kleinen Unstimmigkeiten in Internet Explorer, Version 6 und 7 und Firefox-Version 2 mit Bezug auf die Umsetzung von der Z-index
Eigenschaft.
Elemente in IE6 <select>
In Internet Explorer 6 die <select>
Element ist ein Befehlsfenster Steuerelement, und so immer am oberen Rand der Stapelreihenfolge unabhängig von natürlichen Stapelreihenfolge angezeigt wird, positionieren Sie Werte, oder Z-index
. Dieses Problem ist in der unten Bildschirmaufnahme dargestellt:
Die <select>
Element erscheint zuerst in die natürliche Stapelreihenfolge und erhält eine Z-index
Wert von “1″ zusammen mit der Positionswert”relativen”. Das gold wird Zweiter in der Stack-Reihenfolge angezeigt, und erhält eine Z-index
Wert von “9999″. Aufgrund der natürlichen Stapelreihenfolge und Z-index
Werte, sollte das gold im Vordergrund, angezeigt, die in allen aktuell verwendeten Browsern außer IE6:
– Choose Year –200920102011
Gold Box
Es sei denn, Sie diese Seite mit IE6 anzeigen, sehen Sie Goldene Feld über überlappende die <select>
Element.
Dieser Bug in IE6 hat Probleme mit der Drop-Down-Menüs verursacht, die nicht überlappen <select>
Elemente. Eine Lösung besteht darin, JavaScript zu verwenden, um vorübergehend ausblenden, die <select>
Element, machen Sie es wieder angezeigt, wenn das überlappende Menü ausgeblendet. Eine andere Lösung beinhaltet mit einem <iframe>.
Positionsbasierte Eltern in Internet Explorer 6/7
Internet Explorer, Version 6 und 7 zurückgesetzt falsch stacking Rahmen in Bezug auf das nächste positionierte Ancestor-Element. Um diese etwas kompliziert Bug demonstrieren, werden wir zwei der Felder anzeigen, erneut, aber dieses Mal, die wir das erste Feld in einem “positionierte” Element umbrochen werden:
Graue Box
Blue-Box
Das graue Feld hat eine Z-index
der Wert “9999″; die Blue-Box hat eine Z-index
Wert von “sind 1″ und beide Elemente positioniert. Daher ist die korrekte Implementierung um das graue Feld über der Blue-Box anzuzeigen.
Wenn Sie diese Seite in Internet Explorer 6 oder IE7 anzeigen, sehen Sie die Blue-Box überlappende das graue Feld. Dies wird durch das positionierten Element Umhüllung das graue Feld verursacht. Diese Browser falsch “reset” stacking Rahmen in Bezug auf die positionierte übergeordneten, aber dies sollte nicht der Fall sein. Das graue Feld hat eine viel höhere Z-index
Wert, und sollten daher die Blue-Box überlappende. Alle anderen Browser Rendern dies korrekt.
Negative Werte in Firefox 2
In Firefox Version 2, eine negative Z-index
Wert wird positionieren Sie ein Element hinter den stacking Kontext anstatt in vor der Hintergrund und Grenzen des Elements, das den stacking Kontext eingerichtet. Hier ist eine Bildschirmaufnahme Anzeigen dieser Bug in Firefox 2:
Unten ist die HTML-Version des der obige Bildschirm erfassen, so dass wenn Sie diese Seite in Firefox 3 oder einen anderen derzeit verwendeten Browser anzeigen, Sie die ordnungsgemäße Umsetzung sehen: der Hintergrund der das graue Feld (die das Element ist, die den stacking Kontext richtet) wird angezeigt, unten alles andere, und das graue Feld Inlinetext wird oben die Blue-Box, die die “natürlichen Stapelreihenfolge” Regeln, die weiter oben beschriebenen zustimmt.
Graue Box
Blue-Box
Gold Box
Schaufenster der verschiedenen Verwendung
Anwenden der Z-index
-Eigenschaft auf Elemente auf einer Seite kann eine schnelle Lösung zu verschiedenen Layout-Herausforderungen bieten und ermöglicht es Designern, ein wenig mehr kreative mit überlappenden Objekte in Ihre Entwürfe werden. Einige der praktischen und kreative verwendet für die Z-index
Eigenschaft sind diskutiert und unten.
Überlappende Navigation mit Registerkarten
Die CTCOnlineCME-Website verwendet überlappende transparenten PNG-Bilder mit Z-index
auf der “ausgerichtet” Registerkarte, die praktische Verwendung für diese CSS-Eigenschaft angewendet:
CSS-QuickInfos
Die Z-index
Eigenschaft kann als Bestandteil einer CSS-basierte QuickInfo verwendet werden, wie im folgenden Beispiel aus trentrichardson.com dargestellt:
Light Box
Es gibt Dutzende von Qualität Licht Feld Skripts zur Verfügung kostenlos, wie z. B. das Plugin JQuery FancyBox verwenden. Die meisten, wenn nicht alle dieser Skripten nutzen die Z-index
Eigenschaft:
Leichte Feld Skripts verwenden, eine semi-opaque PNG-Bild um den Hintergrund Abdunkeln während bringt ein neues Element, in der Regel ein Fenster-ähnliche <div>
in den Vordergrund. Die PNG-Überlagerung und die <div>
Beide nutzen Z-index
um sicherzustellen, dass diese beiden Elemente vor allem andere auf der Seite sind.
Drop-Down-Menüs
Drop-down-Menüs wie z. B. Brainjar klassische Revenge of die Menüleiste verwenden Z-index
um das Menü zu gewährleisten sind Schaltflächen und ihre Drop-Downs, am Anfang des Stapels.
Fotogalerie-Effekte
Eine eindeutige Kombination aus JQuery Animation und Z-index
eine eindeutige Wirkung für die Verwendung können in einer Diashow oder Foto Galerie erstellen werden, wie im folgenden Beispiel von der usejquery.com-Website gezeigt:
Polaroid Fotogalerie von Chris Spooner nutzt einige CSS3-Verbesserungen, die in Kombination mit Z-index
So erstellen Sie eine Auswirkung auf Hover re-stacking abkühlen.
In diesem Fancy Miniaturansicht Hover-Effekt ändert Soh Tanaka Z-index
Werte in einem JQuery-basierte Skript:
CSS-Experimente von Stu Nicholls
Stu Nicholls beschreibt eine Reihe von CSS-Experimente auf seiner Website CSSplay. Hier sind einige, die kreative benutzen die Z-index
Eigenschaft:
Mehrschichtige Layout-Erweiterungen
Die 24 Möglichkeiten-Website implementiert Z-index
verbessern Sie die Site-Vorlage, Weben Jahr und Datum Spalten, die die Länge und Breite von der Website-Content, für einen sehr interessanten Effekt zu dehnen.
Fancy Social Bookmarking Box
Die Janko bei Warp Speed-Website verwendet Z-index
in einer “fancy Aktie Box”:
Perfekte vollständige Seite Hintergrund-Image
Diese Technik wurde von Chris Coyier beschrieben und auf der ringvemedia.com-Website verwendet. Es implementiert Z-index
auf Content Abschnitte damit werden Sie über dem Bild “Hintergrund”, die kein Hintergrundbild ist, sondern nur imitiert eine angezeigt:
Abschluss
Stacking Kontexte in CSS sind ein komplexes Thema. Dieser Artikel nicht versucht, jedes Detail zu diesem Thema zu diskutieren, doch stattdessen hat versucht, bieten eine solide Diskussion der wie eine Webseite stacking Kontexten betroffen sind Z-index
, die, wenn Sie vollständig verstanden, wird eine leistungsstarke CSS-Eigenschaft.
Beginn Entwickler sollten jetzt haben ein gutes Verständnis dieser Eigenschaft und vermeiden Sie einige der die allgemeine Probleme, die auftreten, wenn Sie versuchen, es zu implementieren. Darüber hinaus sollten erweiterte Entwickler ein stärkeres Verständnis der wie ordnungsgemäße verwenden, haben Z-index
können Lösungen für unzählige Layout-Probleme und offene Türen zu einer Reihe von kreative Möglichkeiten im CSS-Design anbieten.
Weiterführende Themen
- CSS-Z-Index-Eigenschaft – w3schools
- Beschreibung der Stacking Kontexte – W3C Elaborate
- Z-Index – SitePoint CSS-Referenz
- Funktionsweise Z-Index – Screencast von Chris Coyier
- Attribut in Z-Index – MSDN