Ich habe einen wirklich nervigen Bug, der anscheinend nur unter Windows und OS X auftritt: Der Z-Index eines Elements, dessen Elternteil eine feste Position hat, funktioniert in Chrome nicht! Ich habe meine seltsame Situation in einen einfachen Code umgewandelt:
html:
%Vor%css:
%Vor%Sandkasten: Ссылка
Ich habe auf Internet Explorer 9, Firefox 15, Opera 12.02 und Safari 5.1.7 unter OS X und Windows getestet und alle wie erwartet angezeigt. Ich habe auch auf Ubuntu 12.10 getestet und es funktionierte für jeden Browser, einschließlich Chrome, einwandfrei! Ich habe sogar auf Kindle 4 Browser getestet und es hat funktioniert!
Ich frage mich, ob jemand dieses Problem beheben kann!
one800higgins 'Antwort ist in der richtigen Richtung. Die wirkliche Antwort ist, dass auf mobilen WebKit und Chrome 22+, position: fixed immer erstellt ein neuer Stapelkontext, auch wenn z-index auto ist. Die Stapelkontexthierarchie sieht also so aus:
0 )
#mask (z-index 9998 ) #box (z-index 0 )
.above-mask (z-index 9999 ) .below-mask (z-index 9997 ) Das bedeutet, dass 9998 niemals mit 9999 oder 9997 verglichen wird, um die Stapelreihenfolge zu bestimmen. Stattdessen wird 9999 mit 9997 verglichen, um zu bestimmen, welche von .above-mask und .below-mask weiter vorne liegt, und wenn dann alles innerhalb von #box in diesem Kontext gestapelt ist, wird es als einzelne Ebene bei z- behandelt. index 0 , das hinter #mask bei z-index 9998 gestapelt wird.
Dies erklärt auch, warum @ TheNextBillGates die Antwort auf das Verschieben von #mask in #box funktioniert - denn dann befindet sich #mask im selben Stapelkontext wie .above-mask und .below-mask . Ich empfehle den obigen Link für umfassendere Details, und Sie sollten auch sehen die Ankündigung für die Stapeländerung für fixed Elemente in Chrome .
Ich bin gerade auf diesen Fehler gestoßen, der in Google Chrome v26 immer noch auftritt. Ich konnte den Z-Index so hoch einstellen, wie ich es von Code oder Chrome CSS-Editor wollte, und es machte keinen Unterschied (und die Position des Elements wurde auf absolut festgelegt). Die gleiche Einstellung für den z-Index funktionierte wie erwartet in Firefox und sogar IE8-IE10. Wenn ich das übergeordnete Element von position: fixed auf position: absolute umschaltete, funktionierte der z-Index des untergeordneten Elements in Chrome einwandfrei.
Wenn Sie #mask innerhalb von #box verschieben, funktioniert das problemlos.
Hier ist eine Geige Ссылка
Ich bin mir nicht sicher, warum das gerade so ist.
Die mehreren Z-Index-Stacks sind meiner Meinung nach unglücklich und verwirrend, aber Sie können dies möglicherweise lösen, ohne Ihre HTML-Struktur zu ändern, wenn Sie den Z-Index eines der Eltern des Zielelements erhöhen. Versuchen Sie, ein Elternelement zu finden, das ein Geschwister des problematischen Elements ist, das Ihren Inhalt überlappt. Wenden Sie dieses Styling an:
%Vor%Ihr Kilometerstand kann je nach Projekt variieren, aber diese Lösung hat für mein Projekt funktioniert.
Ich denke es ist, weil es nicht am unteren Ende der Seite wie modale Fenster sein soll. Einfache Lösung ist, einfach alle modalen Fenster zu greifen und sie in ein Div vor dem End-Body-Tag zu werfen. Das folgende Beispiel behebt jedes Chrome-Problem, das ich habe.
%Vor%Tags und Links css google-chrome z-index