Früher glaubte ich, dass ein untergeordnetes Element nicht über ein Element z-indexiert werden konnte, 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 einen Z-Index von 5. Div B hat ein Kindelement: Div C , mit einem Z-Index von 9999. Aus meiner Sicht div C Wird nicht über div A positioniert, weil div C 's Eltern ( div B ) einen niedrigeren Z-Index als div A hat. Dies gilt, außer div B hat einen Z-Index von 'auto'. Wenn div B einen Z-Index von 'auto' hat, was '0' wäre, da es vom Körper erbt, div C über div A , obwohl der Z-Index von div B tatsächlich LOWER ist als es war, als es nicht funktionierte.
Aus der CSS2-Spezifikation ist z-index 'auto' als
definiertDie Stapelebene der generierten Box im aktuellen Stapelkontext ist 0. Die Box erstellt keinen neuen Stapelkontext, es sei denn, sie ist das Stammelement.
Ich habe Probleme beim Verständnis von " stacking context". "Es scheint der einzige Unterschied zwischen einem definierten z-index von 0 und einem Standardwert von 'auto' zu sein, der 0 ist, aber auch hat kein Stapelkontext Genauer gesagt:
Warum werden untergeordnete Elemente von Elementen ohne Stapelinhalt anders als in einem Stapelkontext indexiert?
Hier ist eine Geige, die den Unterschied zwischen dem 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.
In Ihrem Beispiel haben Sie zwei Szenarien, nennen Sie 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 seinem eigenen Stapelkontext, weil z-index: auto und dieser Kontext einfach Teil des Standardstapels ist.
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.% Co_de% ist jedoch ein Kind von #green und wird über #blue übermalt, Eltern und Kind bilden eine neue Stapelung Kontext (ein Sub-Stack-Kontext, wenn Sie möchten).
Schließlich wird #blue über den blau-grünen Stapel gemalt, weil der rote z-Index 2 ist, was 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 zu blau und anderen untergeordneten Elementen in #red . 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
#blue startet kein positioniertes Element zu einem neuen Stapelkontext, während z-index: auto dies tut. 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: Ich habe mir die Freiheit genommen, die Absteckposition so zu beschreiben, als hätten Sie zwei Webseiten, eine mit z-index: 0 , #red , #blue und die zweite mit #green . #red2 , #blue2 . Da sich alle Divs auf derselben Seite befinden, enthalten alle Stapelebenen alle Elemente. Wenn sich zwei rote divs im selben Stapel befinden, wird #green2 über #red2 angezeigt, da Elemente weiter unten im DOM-Baum über frühere Elemente gemalt werden.
Referenz
Ich fand das folgende ziemlich nützlich zu lesen:
Ссылка
Wenn Sie noch mehr Details wünschen, versuchen Sie es mit: Ссылка