z-index chrome bug

Question

Ich habe einen wirklich nervigen Fehler, der nur unter Windows und OS X auftritt: Der Z-Index eines Elements, dessen Elternteil eine feste Position hat, funktioniert in Chrome nicht! Ich wandelte meine merkwürdige Situation zu einem einfachen Code:

html:

<div id="mask"> 
    &nbsp; 
</div> 

<div id="box"> 
    <div class="below-mask circle"> 
     should be below the mask 
    </div> 

    <div class="above-mask circle"> 
     should be above the mask 
    </div> 
</div>​ 

css:

body { 
    font-family: Verdana; 
    font-size: 9px; 
    margin: 0px; 
} 

#box { 
    position: fixed; 
} 

#mask { 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    background-color: rgba(0, 0, 0, 0.5); 
    width: 100%; 
    height: 100%; 
    z-index: 9998; 
} 

.circle { 
    position: relative; 
    background-color: rgba(255, 204, 0, 0.75); 
    border-radius: 75px; 
    line-height: 150px; 
    margin: 50px; 
    text-align: center; 
    width: 150px; 
    height: 150px; 
} 

.above-mask { 
    z-index: 9999; 
} 

.below-mask { 
    z-index: 9997; 
}​ 

Sandbox: http://jsfiddle.net/gibatronic/umbgp/

ich auf Internet Explorer 9, Firefox 15, Opera getestet 12.02 und Safari 5.1.7 unter OS X und Windows und alle von ihnen wie erwartet angezeigt. Ich habe auch auf Ubuntu 12.10 getestet und es funktioniert gut für jeden Browser einschließlich Chrome! Ich habe sogar auf Kindle 4 Browser getestet und es hat funktioniert!

Ich frage mich, ob jemand irgendeine Art von Fix zur Umgehung dieses Problems kennt!

Answer 1

one800higgins 'Antwort ist in der richtigen Richtung. Die wirkliche Antwort ist, dass on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is auto.So ist die Stapelkontext Hierarchie sieht wie folgt aus:

• Dokumentstamm (z-Index 0)
  • #mask (z-Index 9998)
  • #box (z-Index 0)
    • .above-mask (Z-Index 9999)
    • .below-mask (Z-Index 9997)

Das bedeutet, dass 9998 nie mit 9999 oder 9997, um zu bestimmen, um das Stapeln verglichen wird. Stattdessen wird 9999 mit 9997 verglichen, um zu bestimmen, welche den .above-mask und .below-mask weiter vor, und dann, sobald alles in #box in diesem Zusammenhang gestapelt ist, wird es als eine einzelne Schicht in z-Index 0 behandelt, die hinter #mask bei z- gestapelt werden Index 9998.

auch Das erklärt, warum @ TheNextBillGates Antwort #mask innerhalb #box Werke bewegen - denn dann ist #mask im gleichen Stapelkontext wie .above-mask und .below-mask. Ich empfehle den obigen Link für umfassendere Details, und Sie sollten auch the announcement for the stacking change for fixed elements in Chrome sehen.

Answer 2

Ändern oder entfernen Sie die position: fixed auf #box, und Sie sind eingestellt.

jsFiddle

Answer 3

Ich kam gerade diesen Fehler über, und es passiert immer noch in Google Chrome v26. 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.

Answer 4

Wenn Sie die #mask innerhalb der #box bewegen, funktioniert es gut.

<div id="box"> 
    <div id="mask">&nbsp;</div> 
    <div class="below-mask circle">should be below the mask</div> 
    <div class="above-mask circle">should be above the mask</div> 
</div> 

Hier ist eine Geige http://jsfiddle.net/TheNextBillGates/jKm4b/

nicht sicher, warum dies gerade noch ist.

Answer 5

Weisen Sie Ihrem festen div einen Z-Index zu. Das sollte dazu führen, dass chrome die Z-Index-Werte für alle untergeordneten Elemente ebenfalls berücksichtigt.

Answer 6

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:

position: relative; z-index: [# higher than overlapping element's z-index]; 

Ihre milage hängt vom jeweiligen Projekt abhängig, aber diese Lösung funktionierte für mein Projekt.

Answer 7

Ich denke es ist, weil es nicht am 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.

$('body').append('<div id="modelContainer" />'); 
$('.modal').each(function() { 
    $(this).appendTo('#modelContainer'); 
})