Was hat größere Priorität: Opazität oder z-Index in Browsern?

Question

Ich bin dabei, ein "Popup-Fenster" in JavaScript zu programmieren und bin auf eine interessante Sache gestoßen:

Das navyfarbene Quadrat unter dem Popup-Fenster ist sichtbar, obwohl es eigentlich ausgeblendet sein sollte. Das Popup-Fenster wurde nach dem Quadrat eingefügt, es sollte also oben sein.

CSS opacity Eigenschaft des Marinequadrats ist 0.3 . Nach dem, was ich versucht habe, scheint es, dass jede Zahl aus dem Intervall (0,1) würde das gleiche Ergebnis liefern. Wenn ich es ändere in 1 , dann verhält es sich wie erwartet (d. h. der Teil des Quadrats unter dem Popup wird ausgeblendet).

Ich habe versucht, die z-index Eigenschaft zu 10 für das Quadrat und 100 für das Popup, aber das ändert nichts.

Was übersehe ich? Warum wird ein Teil des Quadrats angezeigt?

Getestete Browser:

• Firefox 3.6.x
• Chrom 4

Answer 1

Dies ist kein Fehler und ist eigentlich wie es funktionieren soll . Es ist ein bisschen verwirrend, da die Ausführliche Beschreibung von Stacking Contexts wird nichts davon erwähnt. Allerdings ist die visuelles Formatierungsmodul Links zu den Farbmodul wo dieses besondere Problem auftritt kann gefunden werden (Hervorhebung von mir):

Da ein Element mit einer Deckkraft von weniger als 1 aus Offscreen-Bild zusammengesetzt wird, kann der Inhalt außerhalb des Bildes nicht in z-Reihenfolge zwischen Inhalte innerhalb des Elements geschichtet werden. [ ] müssen Implementierungen einen neuen Stapelkontext für jedes Element mit einer Deckkraft von weniger als 1 erstellen. Wenn ein Element mit opa nicht positioniert, müssen Implementierungen die von ihm erzeugte Ebene malen, innerhalb ihres übergeordneten Stapelkontexts in der gleichen Stapelreihenfolge malen, die verwendet würde, wenn es sich um ein positioniertes Element mit 'z-index: 0' und Deckkraft: 1'. Wenn ein Element mit einer Opazität von weniger als 1 positioniert wird, wird die Eigenschaft "z-index" wie in [CSS21] beschrieben angewendet, mit der Ausnahme, dass auto' als '0' behandelt wird, da immer ein neuer Stapelkontext erstellt wird. Siehe Abschnitt 9.9 und Anhang E von [CSS21] für weitere Informationen über Stacking-Kontexte. Die Regeln in diesem Absatz gelten nicht gelten nicht für SVG-Elemente, da SVG sein eigenes Rendering-Modell hat ([SVG11], Kapitel 3).

Answer 2

Es ist kein Problem der opacity die wichtiger sind als z-index statt z-index relativ zu ihrem Stapelkontext sind (siehe z-index in der CSS2-Spezifikation).

Mit anderen Worten, z-index sind nur im Zusammenhang mit einem positionierten Vorgänger von Bedeutung (unabhängig davon, ob dieser relativ, absolut oder fest ist). Was Sie tun müssen, um Ihr Problem zu beheben, ist das Hinzufügen einer position: relative; zu dem Element, das sowohl Ihr Popup als auch Ihr marineblaues Quadrat enthält, und fügen Sie ihm wahrscheinlich ein z-index: 1; . Wenn ich mir Ihren Screenshot ansehe, wird es wahrscheinlich ein Top-Element wie ein Wrapper-Div sein.

Answer 3

Abhilfe für zwei Elemente wie divs: Fügen Sie eine 0.99 Deckkraft auf Ihr oberstes Element, und die Reihenfolge der beiden Elemente wird wiederhergestellt.

opacity: 0.99;

Answer 4

Eine Alternative zur Verwendung der Deckkraft ist die Verwendung einer transparenten Farbe (mit einem Alphawert)

Anstatt also zu verwenden

{
    background: gray;
    opacity: 0.5;
}

Sie könnten versuchen

{
    background: rgba(128,128,128,0.5);
}

Es ist nicht identisch, aber ich hatte das gleiche Problem wie Sie, und die obige Lösung hat es behoben.

Answer 5

Um dieses Problem zu beheben, könnte ein Beispielcode erforderlich sein.

Sie könnten die overflow: hidden und möglicherweise position: relative in einem DIV die alle Editorobjekte umgibt, um zu erzwingen, dass die Elemente nur innerhalb dieses Bereichs gezeichnet werden DIV z.B:

<div style="overflow: hidden; position: relative">
    (Editor object buttons go here)
</div>

Als letzten Ausweg könnten Sie auch versuchen, eine iframe zwischen den beiden Elementen, um ein Durchsickern zu verhindern.