z-index bringt Feld nicht in den Vordergrund - Lösung noch nicht gefunden
bearbeitet von 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*{:@en} gibt das Vorfahrenelement vor, d.h. für den Grünspan das Grün. Der Grünspan wird **innerhalb** dieses *stacking context*{:@en} in *z*-Richtung vor bzw. hinter die anderen Elemente in diesem *stacking context*{:@en} gebracht.
Der Grünspan weiß nichts von dem *stacking context*{:@en}, 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*{:@en} von Grün sein, d.h. Grün darf keinen *z*-Index haben.
🖖 Stay hard! Stay hungry! Stay alive! **Stay home!**
{:@en}
--
*“Turn off CSS. If the page makes no sense, fix your markup.”* —fantasai
{:@en}
z-index bringt Feld nicht in den Vordergrund - Lösung noch nicht gefunden
bearbeitet von 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*{:@en} gibt das Vorfahrenelement vor, d.h. für den Grünspan das Grün. Der Grünspan wird **innerhalb** dieses *stacking context*{:@en} in *z*-Richtung vor bzw. hinter die anderen Elemente in diesem *stacking context*{:@en} gebracht.
Der Grünspan weiß nichts von dem *stacking context*{:@en}, 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 es nicht im *stacking context*{:@en} von Grün sein, d.h. Grün darf keinen *z*-Index haben.
🖖 Stay hard! Stay hungry! Stay alive! **Stay home!**
{:@en}
--
*“Turn off CSS. If the page makes no sense, fix your markup.”* —fantasai
{:@en}
z-index bringt Feld nicht in den Vordergrund - Lösung noch nicht gefunden
bearbeitet von 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*{:@en} gibt das Vorfahrenelement vor, d.h. für den Grünspan das Grün. Der Grünspan wird **innerhalb** dieses *stacking context*{:@en} in *z*-Richtung vor bzw. hinter die anderen Elemente in diesem *stacking context*{:@en} gebracht.
Der Grünspan weiß nichts von dem *stacking context*{:@en}, 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 das Grünspan nach vorn holen willst, dann darf es nicht im *stacking context*{:@en} von Grün sein, d.h. Grün darf keinen *z*-Index haben.
🖖 Stay hard! Stay hungry! Stay alive! **Stay home!**
{:@en}
--
*“Turn off CSS. If the page makes no sense, fix your markup.”* —fantasai
{:@en}