Kinder von Z-Index: 'Auto' vs Z-Index: 0, und was ist "Stacking-Kontext" in CSS?

Question

Bisher glaubte ich, dass ein untergeordnetes Element nicht über ein Element z-indexiert werden kann, das ein Geschwister seines übergeordneten Elements ist, das einen höheren z-Index als sein übergeordnetes Element aufweist. Zum Beispiel sind Divs A und B Geschwister. Div A hat einen Z-Index von 10 und div B hat ein Z-Index von 5. Div B ein untergeordnetes Element hat: Div C, mit einem Z-Index von 9999. Von meinem Verständnis, div C wird nicht oben div A positioniert werden, weil div C 's Eltern (div B) hat einen niedrigeren Z-Index als div A. Dies gilt, es sei denn, div B hat einen Z-Index von 'auto'. Wenn div B hat einen Z-Index von 'Auto', die wäre '0', wie er von Körper erbt, div C Positionen über div A, obwohl div B's Z-Index ist tatsächlich LOWER als es war, als es warn ' t arbeiten.

Vom CSS2 spec, z-Index ‚Auto‘ wird als

Die Stapelebene des erzeugten Box im aktuellen Stapelkontext 0 ist definiert als die Box einen Kontext neuen Stapel nicht etablieren, es sei denn es ist das Wurzelelement.

Ich habe Schwierigkeiten beim Verständnis „Kontext zu stapeln.“ Es scheint, der einzige Unterschied zwischen einem definierten Z-Index von 0 und eine Standard von ‚auto‘ zu sein, die 0 ist, aber auch keinen Stapelkontext . Genauer gesagt:

Warum werden untergeordnete Elemente ohne Stapelinhalt anders als in einem Stapelkontext indexiert?

Hier ist eine Geige, die den Unterschied zwischen Z-Index von 0 und einem Z-Index von Auto zeigt. Das grüne div ist ein Kind des blauen div und das rote div ist ein Geschwister des blauen div.

http://jsfiddle.net/c7Tvt/

Answer 1

In Ihrem Beispiel haben Sie zwei Szenarien, nennen sie Blau und Blau-2.

In Blau haben Sie zwei Stapelkontexte, der erste enthält #blue und der zweite enthält #red und #green. #blue befindet sich in einem eigenen Stapelkontext, weil z-index: auto, und dieser Kontext ist einfach Teil des Standardstapels.

In Blue-2 haben Sie z-index: 0 für #blue definiert, daher gehört es zum selben Stapelkontext wie #red. In Blue-2 wird #blue zuerst gemalt, weil es den niedrigsten Z-Index 0 hat. #green ist jedoch ein Kind von #blue und wird über #blue übermalt, die Eltern und Kind bilden einen neuen Stapelkontext (ein Substapelkontext wenn du wünschst). Schließlich ist #red über den blau-grünen Stapel gemalt, weil der rote Z-Index 2 ist, der größer ist als der blaue Z-Index von 0. In diesem Fall beeinflusst der Z-Index von grün seine Stapelebene in Bezug auf Blau und alle anderen Kindelemente in #blue. In Blue-2 gibt es drei Stapelkontexte, den Standard (# 1), den für Rot und Blau (# 2), und den anderen, der blau und grün ist (# 3).

Schlüsselpunkt
z-index: auto nicht startet ein positioniertes Element zu einem neuen Stapelkontext hinzuzufügen während z-index: 0 der Fall ist. Beachten Sie, dass es mindestens einen Stapelkontext gibt, den Standardkontext, der für die Elemente aufgrund ihrer natürlichen HTML/DOM-Reihenfolge auf der Seite definiert ist.

Hinweis: nahm ich mir die Freiheit, die Abstecken Position beschreiben, als ob Sie zwei Web-Seiten hatten, ein mit #red, #blue, #green und dem zweiten mit #red2, #blue2, #green2. Da sich alle Divs auf derselben Seite befinden, enthalten alle Stapelebenen alle Elemente. Wenn sich zwei rote divs im gleichen Stapel befinden, wird #red2 über #red angezeigt, da Elemente weiter unten im DOM-Baum über frühere Elemente gemalt werden.

Referenz
fand ich das ziemlich nützlich folgendes zu lesen:
https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_2

Wenn Sie noch mehr Details wollen, versuchen Sie bei der Suche:
http://www.w3.org/TR/CSS21/zindex.html