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

Sie können versuchen, das DIV des Popup-Fensters wie folgt zu setzen !important damit sich der Stil bei der Anwendung eines neuen Stils oder einer neuen Klasse nicht ändert:

background-color: white !important;
z-index: 100 !important;
opacity: 1.0 !important;

Erstellen Sie dann eine neue CSS-Klasse:

.PopupElement
{
 z-index: inherited;
 opacity: inherited;
}

Und fügen Sie allen Elementen im Fenster eine Klasse hinzu, wie zum Beispiel diese:

<input value="posx" class="some_class PopupElement"/>

Meine Vermutung ist, dass dies funktionieren würde, da es keine Priorität bei der Anwendung von CSS-Attributen gibt... soweit ich weiß. =)

Answer 2

Ich hatte das gleiche Problem. Die Verwendung von rgba anstelle von Farbe/Opazität löste mein Problem. Arbeiten mit LESS (in der Bootstrap-Framework), hat die fade() Funktion die Umwandlung für mich.

Answer 3

Obwohl @Guillaume Esquevin bereits eine gute Antwort gegeben hat, werde ich versuchen, sie zu erweitern, falls jemand nicht weiß, was ein Stapelungskontext ist (wie ich).

Wie Sie lesen können ici Es gibt einen so genannten Stapelkontext, der sich auf eine Gruppe von Elementen bezieht, die ein übergeordnetes Element teilen und sich gemeinsam im Stapel bewegen. Ein Beispiel könnte ein div und alle seine Kinder sein.

Es gibt drei Möglichkeiten, einen Stapelkontext zu erstellen: in der Wurzel des Dokuments (dem html-Element), durch Positionierung des übergeordneten Elements und durch Änderung der Deckkraft des übergeordneten Elements auf einen Wert unter 1.

Wenn Sie ein div mit einer Deckkraft von weniger als 1 haben und Sie möchten, dass ein Geschwisterelement dieses div hinter ihm (und seinen Kindern) erscheint, können Sie einen neuen Stapelkontext für dieses Geschwisterelement erstellen, indem Sie seine Position auf relativ setzen oder auch seine Deckkraft ändern.