Die Z-Index-CSS-Eigenschaften: Eine umfassende Übersicht

WAM
Tutorials, How to Do
Mittwoch - 16 . September . 2009

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-indexist, 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-indexder Wert “9999″; die Blue-Box hat eine Z-indexder Wert “500″; und das gold Feld hat eine Z-indexWert 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 plain copy to clipboard print ?

#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-indexWert 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 plain copy to clipboard print ?

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-indexWert von “1″ zusammen mit der Positionswert”relativen”. Das gold wird Zweiter in der Stack-Reihenfolge angezeigt, und erhält eine Z-indexWert 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-indexder Wert “9999″; die Blue-Box hat eine Z-indexWert 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-indexauf 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:

CSS Imagemap

CSS-Spiel

CSS-Frames-Emulation

Mehrschichtige Layout-Erweiterungen

Die 24 Möglichkeiten-Website implementiert Z-indexverbessern 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-indexin 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-indexauf 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.

Die Z-Index-CSS-Eigenschaften: Eine umfassende Übersicht