z-index bringt Feld nicht in den Vordergrund - Lösung noch nicht gefunden

[Gunnar Bittersmann]

@@JürgenB

irgendwie habe ich das mit dem stacking context nicht verstanden. in diesem Pen https://codepen.io/JuergenB/pen/ZEQwdYK soll der Text im grünen Kasten über allem stehen. Ich habe den z-index auf 1000 gesetzt, und mit opacity:.99 einen neuen stacking context aufgemacht, dachte ich zumindestens.

Nö, so nicht. Den stacking context gibt das Vorfahrenelement vor, d.h. für den Grünspan das Grün. Der Grünspan wird innerhalb dieses stacking context in z-Richtung vor bzw. hinter die anderen Elemente in diesem stacking context gebracht.

Der Grünspan weiß nichts von dem stacking context, in welchem sich Rot und Blau befinden, kann also auch nicht vor oder hinter diese gebracht werden.

Das ganze Grün kann nach vorne geholt werden, indem es einen höheren z-Index als Blau verpasst bekommt.

Hat jemand eine Idee, wie ich den grünen Text nach oben bekomme?

Wenn du nur den Grünspan nach vorn holen willst, dann darf er nicht im stacking context von Grün sein, d.h. Grün darf keinen z-Index haben.

Ergänzung: opacity brauchst du nicht. Einen vierstelligen Wert für z-Index auch nicht.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!