Die meisten CSS-Eigenschaften sind leicht zu verstehen. Oftmals führt die Anwendung einer davon auf ein Markup-Element zu sofortigen Ergebnissen – Sie müssen nur die Seite aktualisieren, und schon können Sie die Wirkung der Anwendung sehen. Allerdings gibt es einige Eigenschaften, die komplexer sind und nur unter bestimmten Umständen funktionieren.
Die Z-Index-Eigenschaft gehört zur zweiten Gruppe, die zweifellos mehr Verwirrung stiftet als alle anderen. Ironischerweise ist es jedoch, wenn man den Z-Index vollständig versteht, sehr einfach zu verwenden und oft eine effektive Möglichkeit, viele Layoutprobleme zu lösen.
In diesem Artikel werden wir uns ansehen, was Z-Index ist, welche Probleme es beim Verständnis gibt und auch einige Beispiele für seine Verwendung diskutieren. Wir werden auch den Unterschied in der Art und Weise berücksichtigen, wie Browser damit umgehen, insbesondere in früheren Versionen von Internet Explorer und Firefox.
Was ist also diese Eigenschaft?
Die Z-Index-Eigenschaft bestimmt die Platzierungsebene im Stapel und die Tiefe des HTML-Elements. „Tiefenebene“ bezeichnet die Position des Elements entlang der Z-Achse (senkrecht zur X- und Y-Achse des Bildschirms). Je höher der Z-Index-Wert ist, desto höher wird das Element sein.
Natürliche Anordnung der Elemente
Auf einer Seite wird die normale Platzierung von Elementen (und damit meine ich entlang der Z-Achse) von mehreren Faktoren bestimmt. Nachfolgend finden Sie eine Liste dieser Faktoren, beginnend mit den niedrigsten Elementen. Bei dieser Liste wird davon ausgegangen, dass keinem Element explizit eine Z-Index-Eigenschaft zugewiesen ist.
- Der Hintergrund und die Ränder des Elements, die den Stapelkontext definieren.
- Elemente mit negativem Stapelkontext, in der Anzeigereihenfolge.
- Nicht positionierte (Position: statisch) sowie ohne festgelegte Float-Eigenschaft (Float: keine) Blockelemente (Anzeige: Block), in der Anzeigereihenfolge.
- Nicht positionierte Blockelemente mit Float-Eigenschaftensatz, in der Anzeigereihenfolge.
- Inline-Elemente in der Reihenfolge der Anzeige.
- Elemente mit festgelegter Positionseigenschaft in der Anzeigereihenfolge.
Durch die korrekte Anwendung der Z-Index-Eigenschaft kann sich die natürliche Position im Stapel ändern.
Natürlich ist die Reihenfolge der Elemente in einem Stapel erst ersichtlich, wenn Sie die Elemente übereinander anzeigen müssen. Um die normale Reihenfolge der Elemente anzuzeigen, werden im folgenden Beispiel daher negative Ränder verwendet.
Diese Elemente haben unterschiedliche Hintergrund- und Rahmenfarben, und die letzten beiden sind aufgrund der eingestellten negativen Randeigenschaft versetzt. Auf diese Weise können Sie die natürliche Platzierung der Elemente erkennen, wobei jedes nächste „über“ dem vorherigen liegt. Für diese Elemente ist keine Z-Index-Eigenschaft festgelegt, und ihre Stapelreihenfolge ist natürlich.
Wo könnten die Probleme liegen?
Schauen wir uns das beliebteste Problem unter unerfahrenen Entwicklern an. Die Sache ist, dass die Z-Index-Eigenschaft nur für Elemente funktioniert, deren Positionseigenschaft auf absolute, feste oder relative gesetzt ist.
Um dies zu demonstrieren, zeigen wir dieselben drei Elemente an, wobei jedoch die Eigenschaft „z-index“ festgelegt ist, um zu versuchen, die Reihenfolge entlang der Z-Achse zu ändern.
Stellen wir den Z-Index des grauen Elements auf 9999, des blauen Elements auf 500 und des braunen Elements auf 1 ein. Es ist logisch, dass sich die Reihenfolge ändern wird. In diesem Fall jedoch nicht, da die Positionseigenschaft standardmäßig statisch ist.
Lassen Sie uns die Positionseigenschaft auf „relativ“ setzen und sehen, was passiert:
Aber jetzt haben wir das erwartete Ergebnis. Die Reihenfolge der Elemente hat sich geändert, das graue Element liegt oben und das braune ganz unten.
Syntax
Die Z-Index-Eigenschaft betrifft sowohl Blockelemente als auch Inline-Elemente. Der Wert kann eine positive oder negative Zahl sein, der Standardwert ist auto . Der Standardwert bedeutet, dass sich das Element auf derselben Ebene wie sein übergeordnetes Element befindet.
Unten finden Sie das CSS für das dritte Beispiel, in dem die Z-Index-Eigenschaft korrekt angewendet wird:
#grey_box ( Breite: 200px; Höhe: 200px; Rand: einfarbig 1px #ccc; Hintergrund: #ddd; Position: relativ; Z-Index: 9999; ) #blue_box ( Breite: 200px; Höhe: 200px; Rand: einfarbig 1px # 4a7497; Hintergrund: #8daac3; Position: relativ; Z-Index: 500; )
Noch einmal: Insbesondere für CSS-Neulinge funktioniert die Z-Index-Eigenschaft nicht, es sei denn, Sie legen die Positionseigenschaft fest.
Verwendung in Javascript
Sie können die Z-Index-Eigenschaft mithilfe von JavaScript dynamisch beeinflussen. Die Syntax ähnelt der der meisten CSS-Eigenschaften und verwendet die Kamel-Notation, um den Bindestrich in CSS-Eigenschaften zu ersetzen.
Var myElement = document.getElementById("gold_box"); myElement.style.position = "relative"; myElement.style.zIndex = "9999";
Falsche Implementierung in IE und FireFox
In einigen Fällen kommt es in IE6, IE7 und FireFox 2 zu einer falschen Implementierung der Z-Index-Eigenschaft.
Element im IE6 auswählen
In Internet Explorer 6 ist das ausgewählte Element ein Windows-Steuerelement. Aus diesem Grund wird es immer über allen Elementen angezeigt, wobei die normale Platzierungsreihenfolge sowie die Eigenschaften Position und Z-Index ignoriert werden. Das Problem ist im Bild unten dargestellt:
Das ausgewählte Element ist das erste Element im Dokument, seine Z-Index-Eigenschaft ist auf 1 und seine Position auf relativ festgelegt. Das Div wird nach der Auswahl angezeigt und sein Z-Index ist „9999“. Basierend auf all dem sollte sich das div über dem select befinden, wie es in anderen Browsern der Fall ist:
Wählen Sie Jahr – 2009 2010 2011
Wenn Sie diesen Artikel nicht in IE6 lesen, werden Sie feststellen, dass sich das div über dem select befindet.
Dieser IE6-Fehler stellt ein großes Problem für Dropdown-Menüs dar, wenn diese das ausgewählte Element überlappen müssen. Eine Lösung könnte darin bestehen, JavaScript zu verwenden, um die Selektoren vorübergehend auszublenden und sie dann wieder anzuzeigen, nachdem das Menü ausgeblendet ist. Eine andere Lösung könnte die Verwendung eines Iframes sein.
Positionierte Eltern in IE6/IE7
Internet Explorer-Versionen 6 und 7 setzen den Stapelkontext in Bezug auf das am nächsten positionierte übergeordnete Element nicht korrekt zurück. Um diesen Fehler zu veranschaulichen, werden wir erneut zwei Divs anzeigen. Aber dieses Mal werden wir das erste in ein positioniertes Element einschließen.
Das graue Element hat einen Z-Index von 9999, das blaue Element hat einen Z-Index von 1, beide Elemente sind positioniert. Daher erscheint bei korrekter Implementierung das graue Element über dem blauen.
Wenn Sie diese Seite in IE6 oder IE7 öffnen, werden Sie feststellen, dass das blaue Element das graue überlappt. Dies geschieht, weil das graue Element in ein anderes Div eingeschlossen ist, dessen Position auf relative festgelegt ist.
Beide Browser „setzen“ den Stapelkontext für relativ positionierte Elemente zurück, obwohl dies nicht der Fall sein sollte. Das graue Element hat einen höheren Z-Index als das blaue Element und sollte daher höher erscheinen. Bei anderen Browsern gibt es dieses Problem nicht.
Negative Werte in FireFox 2
In FireFox 2 befinden sich Elemente mit einem negativen Z-Index unterhalb des Stapelkontexts und nicht über dem Hintergrund und den Rändern des Elements, das den Stapelkontext bildet. Ein Beispiel sehen Sie im Bild:
Unten finden Sie die HTML-Version
Wie Sie sehen können, befindet sich der Hintergrund des grauen Elements (das den Stapelkontext bildet) unter dem blauen und der Text (der das Inline-Element im grauen Element ist) darüber, entsprechend den oben beschriebenen natürlichen Layoutregeln.
Anwendungsbeispiele
Der Originalartikel enthält viele Beispiele für die Nutzung der Immobilie. Ehrlich gesagt bin ich zu faul, das zu übersetzen, im Grunde ist es ein Screenshot, ein kleiner Kommentar und ein Link. Wenn Sie es wirklich brauchen, dann schreiben Sie, ich nehme mir Zeit dafür.
Alle auf einer Webseite positionierten Elemente können in einer bestimmten Reihenfolge übereinander gestapelt werden und so eine dritte Dimension senkrecht zum Bildschirm simulieren. Jedes Element kann sich entweder unter oder über anderen Objekten auf der Webseite befinden. Ihre Platzierung entlang der Z-Achse wird durch den Z-Index gesteuert. Diese Eigenschaft funktioniert nur für Elemente, deren Positionswert absolut, fest oder relativ ist.
Brief Information
Bezeichnungen
| Beschreibung | Beispiel | |
|---|---|---|
| <тип> | Gibt den Typ des Werts an. | <размер> |
| A && B | Die Werte müssen in der angegebenen Reihenfolge ausgegeben werden. | <размер> && <цвет> |
| A | B | Zeigt an, dass Sie nur einen der vorgeschlagenen Werte (A oder B) auswählen müssen. | normal | Small-Caps |
| Ein || B | Jeder Wert kann unabhängig oder zusammen mit anderen in beliebiger Reihenfolge verwendet werden. | Breite || zählen |
| Gruppiert Werte. | [ Zuschneiden || kreuzen ] | |
| * | Null oder mehrmals wiederholen. | [,<время>]* |
| + | Wiederholen Sie dies einmal oder mehrmals. | <число>+ |
| ? | Der angegebene Typ, das Wort oder die Gruppe ist optional. | Einsatz? |
| (A, B) | Wiederholen Sie mindestens A, aber nicht mehr als B-Mal. | <радиус>{1,4} |
| # | Wiederholen Sie dies einmal oder mehrmals, getrennt durch Kommas. | <время># |
Werte
Als Werte werden ganze Zahlen (positiv, negativ und Null) verwendet. Je höher der Wert, desto höher wird das Element im Vergleich zu den Elementen mit einem niedrigeren Wert bewertet. Wenn der Z-Index-Wert gleich ist, ist das Element im Vordergrund das unten im HTML-Code beschriebene. Es ist akzeptabel, einen negativen Wert zu verwenden.
Zusätzlich zu numerischen Werten wird auto verwendet – die Reihenfolge der Elemente wird in diesem Fall automatisch basierend auf ihrer Position im HTML-Code und ihrer Zugehörigkeit zum übergeordneten Element erstellt, da untergeordnete Elemente dieselbe Nummer wie ihr übergeordnetes Element haben.
Beispiel
Wenn Sie in diesem Beispiel mit der Maus über die Karte fahren, gelangt diese an den vorderen Rand und überlappt teilweise den Rest der Bilder (Abb. 1).
Reis. 1. Ändern der Kartenreihenfolge
Objektmodell
Ein Objekt.style.zIndex
Notiz
Liste erstellt mit
Internet Explorer-Versionen bis einschließlich 7.0 interpretieren Auto als 0.
In Firefox-Browserversionen bis einschließlich 2.0 positioniert ein negativer Z-Indexwert das Element unterhalb des Hintergrunds der Webseite und ihres Inhalts.
Spezifikation
Jede Spezifikation durchläuft mehrere Genehmigungsstufen.
- Empfehlung – Die Spezifikation wurde vom W3C genehmigt und wird als Standard empfohlen.
- Kandidatenempfehlung ( Mögliche Empfehlung) – Die für den Standard verantwortliche Gruppe ist davon überzeugt, dass sie ihre Ziele erreicht, benötigt jedoch Hilfe von der Entwicklungsgemeinschaft, um den Standard umzusetzen.
- Vorgeschlagene Empfehlung Vorgeschlagene Empfehlung) – zu diesem Zeitpunkt wird das Dokument dem W3C-Beirat zur endgültigen Genehmigung vorgelegt.
- Arbeitsentwurf – Eine ausgereiftere Version eines Entwurfs, der zur Überprüfung durch die Community diskutiert und geändert wurde.
- Entwurf des Herausgebers ( Redaktioneller Entwurf) – eine Entwurfsversion des Standards, nachdem von den Projektredakteuren Änderungen vorgenommen wurden.
- Entwurf ( Entwurf einer Spezifikation) – die erste Entwurfsversion des Standards.
Die Z-Index-Eigenschaft steuert Reihenfolge der Bewerbung positionierte Elemente, wenn sie einander überlappen. Die Eigenschaft akzeptiert positive und negative Ganzzahlwerte.
In einem normalen Ablauf werden position:statische Elemente sequentiell nacheinander in der Reihenfolge platziert, in der sie im HTML-Dokument definiert sind. Der Standardwert ist z-index: auto; .
Reis. 1. Elemente entlang der Z-Achse positionieren Die Z-Index-Eigenschaft gibt die Reihenfolge der Elemente entlang der Z-Achse an. Normalerweise überlappen Elemente mit einem hohen Indexwert Elemente mit einem niedrigeren Wert und einem automatischen Wert und platzieren sie im Vordergrund.
Reis. 2. Auswirkung der Z-Index-Eigenschaft auf positionierte Elemente Overlay-Kontext
Wenn die Z-Index- und Positionseigenschaften der Elemente nicht explizit festgelegt sind, ist der Overlay-Kontext die Reihenfolge, in der sie im Quellcode erscheinen. Wenn für Elemente kein Z-Index angegeben ist, rendert der Browser die Elemente auf der Seite in der folgenden Reihenfolge:
Wurzelelement
Positioniert Elemente in der Reihenfolge, in der sie im Quellcode erscheinen. Der letzte befindet sich im Vordergrund.
Reis. 3. Standardreihenfolge der Elemente im 3D-Raum 
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Wie aus der Abbildung ersichtlich ist, ist ein Element mit position: absolute; steht im Vordergrund, gefolgt vom Text, darunter sind schwebende Elemente mit float: left; , nicht positionierte Blockelemente werden im Hintergrund platziert (Da schwebende und positionierte Elemente aus dem Fluss entfernt werden, werden sie von nicht positionierten Elementen auf Blockebene ignoriert und entsprechend dem Markup, also dem Element, nacheinander platziert .
Die Z-Index-Eigenschaft erstellt einen neuen Overlay-Kontext. Hier können Sie die Stapelreihenfolge ändern positionierte Elemente. Elemente werden auf der Seite in der folgenden Reihenfolge angezeigt (sofern sie nicht auf Eigenschaften festgelegt sind, die sich auf den Overlay-Kontext auswirken – Deckkraft, Filter, Transformation):
Wurzelelement , das alle Elemente einer Webseite enthält.
Positionierte Elemente mit einem negativen Z-Indexwert.
Blockelemente, nicht schwebend oder positioniert.
Floating Floats sind nicht positionierte Elemente in der Reihenfolge, in der sie im Quellcode erscheinen.
Inline nicht positionierte Elemente (Text, Bilder).
Positionierte Elemente mit Z-Indexwerten: 0; und Z-Index: auto; .
Positionierte Elemente mit positiven Z-Indexwerten. Ein hoher Indexwert stellt das Element im Vordergrund dar. Elemente mit gleichen Z-Index-Werten werden entsprechend ihrer Position im Quellcode gerendert.
Reis. 4. Die Z-Index-Eigenschaft erstellt einen neuen Kontext für die Überlagerung von Elementen im 3D-Raum Vom Autor: Willkommen zu unserer CSS-Tutorialreihe von A bis Z! In dieser Serie erzähle ich Ihnen etwas über CSS-Werte und -Eigenschaften, die mit verschiedenen Buchstaben des Alphabets beginnen. Manchmal reicht ein Tutorial nicht aus, und in diesem Artikel gebe ich Ihnen ein paar schnelle Tipps zum Arbeiten mit der Z-Index-Eigenschaft.
Das vollständige Video-Tutorial und seine Textversion zur Z-Index-Eigenschaft können unter dem Link angesehen werden.
Z steht für Z-Index
Wie zu erwarten ist, wird sich der letzte Artikel der Reihe ausschließlich der Z-Index-Eigenschaft widmen.
Wie im Video-Tutorial erwähnt, steuert die Z-Index-Eigenschaft die Reihenfolge der Ebenen in einem Dokument. Es gibt mehrere komplexe Probleme im Zusammenhang mit dem Stack-Kontext, die im Video-Tutorial besprochen wurden, aber im Allgemeinen verfügt die Z-Index-Eigenschaft über eher eingeschränkte Funktionalität.
Z-Index funktioniert nur bei positionierten Elementen
Wenn Sie die Reihenfolge der Ebenen auf Elementen ändern müssen, können Sie dies mithilfe der Z-Index-Eigenschaft tun. Diese Eigenschaft funktioniert jedoch nur mit Elementen, deren Positionseigenschaft auf absolut, relativ oder fest eingestellt ist.
Bei der Erstellung komplexer Layouts und interessanter Schnittstellenmuster ist die präzise Positionierung von Elementen unerlässlich, aber wir alle möchten die Reihenfolge der Ebenen ändern können, ohne ein Element von seiner ursprünglichen Position auf der Seite verschieben zu müssen.
Wenn Sie nur die Reihenfolge der Ebenen ändern müssen, können Sie die Positionseigenschaft einfach auf „relativ“ setzen und oben, rechts, unten oder links weglassen. Das Element bleibt an seinem Platz, die Struktur des Dokuments wird nicht gestört und die Z-Index-Eigenschaft funktioniert wie vorgesehen.
Sie können in der Z-Index-Eigenschaft negative Werte angeben
Ebenen werden häufig zum Erstellen komplexer geometrischer Formen oder UI-Komponenten verwendet. Bei dieser Schichtung werden Elemente mit einem ständig steigenden Z-Index-Wert übereinander platziert. Um ein Element eine Ebene nach unten zu verschieben, geben Sie einfach einen niedrigeren Z-Index-Wert an. Diese Eigenschaft akzeptiert jedoch auch negative Werte.
Negative Werte können mit Pseudoelementen verwendet werden, um sie hinter dem Inhalt des übergeordneten Elements zu platzieren.
Um die :before- oder after-Pseudoelemente unter dem Text des übergeordneten Elements zu platzieren, müssen Sie einen negativen Wert angeben. So funktioniert der Stapel.
Schauen Sie sich die CodePen-Demo unten an. Sie können mit verschiedenen Z-Index-Werten herumspielen.
Verwenden Sie 100 als Inkrement für den Z-Index
Bei der Arbeit mit Z-Index ist es nicht üblich, Code wie diesen zu schreiben:
Modal (Z-Index: 99999; )
Modal ( Z-Index: 99999; |
Es tut mir weh, diesen Code anzusehen. Noch schlimmer wird es, wenn Sie!wichtig hinzufügen. Code wie dieser ist ein Zeichen dafür, dass der Entwickler den Kontext des Stapels nicht versteht und versucht, eine Ebene über eine andere zu legen.
Anstatt beliebige Zahlen wie 9999, 53 oder 12 zu verwenden, können wir unsere Z-Index-Skala systematisieren und ordnen. Und das liegt nicht daran, dass ich ein Entwickler mit Zwangsstörungen bin. Ehrlich.
Als Inkrement für den Z-Index verwende ich keine einstellige Zahl, sondern 100.
Ebene eins (Z-Index: 100;).Ebene zwei (Z-Index: 200;).Ebene drei (Z-Index: 300;)
Dieser manuelle Ansatz zum Erstellen eines Z-Index-Systems ist sehr robust, kann jedoch in Kombination mit einem Präprozessor wie Sass noch flexibler werden. Das ist alles, Freunde. Dies war der letzte Artikel in der CSS A bis Z-Reihe! Wir hoffen, es hat Ihnen gefallen und Sie haben viel über CSS-Eigenschaften gelernt. |
Hallo, liebe Leser der Blogseite! Von Zeit zu Zeit erlaube ich mir, der Sammlung Materialien hinzuzufügen, und heute werden wir über die Z-Index-Eigenschaft sprechen, die die Positionierung von Elementen auf einer Webseite beeinflusst.
Sie müssen verstehen, dass diese Regel nur für positionierte Tags funktioniert, für die die Eigenschaft angegeben ist. Das heißt, für den Standarddokumentfluss (wo die Positionierung nicht angegeben ist oder der Parameter als statisch definiert ist) funktioniert es nicht. Im Folgenden werde ich die Funktionsweise von Z-Index anhand eines konkreten Beispiels demonstrieren.
Wie der Z-Index die Elementpositionen bestimmt
Für jedes Element in CSS gibt es also seinen eigenen Platz auf der Webseite, entsprechend den dafür vorgeschriebenen Stilen. Die Lage aller Blöcke zueinander wird anhand eines Koordinatensystems bestimmt.
Im Allgemeinen liegt der Referenzpunkt in der oberen linken Ecke des Anzeigebereichs (Browserfenster). In diesem Fall bestimmen die X- und Y-Achsen die Position der Elemente in der Ebene des Monitorbildschirms. Aber die Z-Achse ermöglicht Ihnen, wie Sie wahrscheinlich vermutet haben, die Modellierung eines räumlichen Koordinatensystems.
Es steht senkrecht zur durch X und Y gebildeten Ebene und ist direkt auf uns gerichtet. Es versteht sich von selbst, dass der Referenzpunkt der Z-Achse Null ist. Der Nullpunkt enthält alle statischen Elemente, für die die statische Eigenschaft Position definiert ist (normale Positionierung).
Wenn die Position standardmäßig überhaupt nicht angegeben ist, entspricht diese Situation absolut der Situation, als ob der statische Parameter angegeben worden wäre. In diesem Fall werden alle HTML-Elemente der Seite im Standard-Stream gerendert. So ermöglicht es die Position, wie zum Beispiel float (siehe Informationen zum Erstellen von schwebenden Elementen in CSS), die übliche Sortieroption zu ändern, um spezielle Layoutprobleme zu lösen.
Auch wenn statische Webelemente einen Z-Wert von Null haben, also in der X-Y-Ebene positioniert sind, gibt es Regeln für den Fall, dass sie miteinander kollidieren.
Die Grundregel lautet: Ein Webelement, das durch ein Tag definiert wird, das sich weiter unten im HTML-Code der Seite befindet, wird näher bei uns platziert. Das heißt, er überlappt oben den Block, dessen Code sich darüber befindet.
Aber klar positionierte (dynamische) Elemente (mit relativen, absoluten, festen Werten) stehen vor allen statischen. In der Beziehung zwischen dynamischen Webelementen gilt das gleiche Gesetz: Dasjenige, das sich weiter unten im Code befindet, ist näher an uns (über den anderen).
Hier kann das letzte Wort gesagt werden Z-Index-Eigenschaft. Je höher sein numerischer Wert ist, desto weiter oben wird das entsprechende Element der Webseite platziert. Das alles funktioniert aber, wie gesagt, nur für Elemente mit absoluter, relativer oder fester Positionierung. Die Syntax für Z-Index-Parameter lautet wie folgt:
Z-Index: number|auto|inherit
Numerische Werte können alles sein: sowohl negativ als auch positiv, einschließlich Null. Der Parameter auto bestimmt die automatische Anordnung von Webelementen entsprechend ihrer Reihenfolge im HTML-Code unter Berücksichtigung ihrer Abstammung. Der Vererbungswert gibt den Z-Index des übergeordneten Elements an.
Jetzt ist es an der Zeit, unsere Forschung in eine praktische Richtung zu lenken, um die theoretischen Berechnungen zu bestätigen. Als Beispiel nehme ich drei relativ positionierte Objekte (mit der Eigenschaft position: relative angegeben). Der Übersichtlichkeit halber schreibe ich jeweils den Farbton und den Rahmen auf und gebe auch den linken und oberen Rand sowie die Breite und Höhe an:
Nachdem der Browser den HTML-Code interpretiert hat, sehen diese drei Blöcke auf der Webseite folgendermaßen aus:
Bitte beachten Sie, dass die Behälter in voller Übereinstimmung mit der oben genannten Regel angeordnet sind: Das untere Blau überlappt das etwas höher gelegene Rot und das wiederum noch höhere Grün. Fügen wir nun dem roten Block eine Z-Index-Eigenschaft mit dem Wert 1 hinzu:
Das Bild wird sich ändern:
Wie Sie sehen, hat der rote Container einen Vorteil und befindet sich nun über den anderen. Versuchen wir als Nächstes, den Z-Index zum grünen Block hinzuzufügen, jedoch mit dem Wert 2:
Das Ergebnis wird so aussehen:
Es ist klar, dass der grüne Container, der den höchsten Z-Index-Wert erhalten hat, jetzt höher ist als die anderen. Somit werden alle eingangs vorgebrachten Argumente durch praktische Experimente voll bestätigt. Beachten Sie vor allem, dass die Z-Index-Eigenschaft nur mit explizit positionierten Webelementen funktioniert.
