Mobiles Menü verschwindet hinter Card-Box #110

New Issue

muli · 2022-07-24T10:09:16+02:00

muli commented

2022-07-24 10:09:16 +02:00

Unter /about/ stellen wir Inhalte in einer Box dar (CSS-Klasse -card-box). In der Mobilen Ansicht reicht das ausgeklappte Menü über die Box hinaus, diese liegt aber vor dem Menü und verdeckt so den unteren Teil.

Unter `/about/` stellen wir Inhalte in einer Box dar (CSS-Klasse `-card-box`). In der Mobilen Ansicht reicht das ausgeklappte Menü über die Box hinaus, diese liegt aber vor dem Menü und verdeckt so den unteren Teil.

muli self-assigned this 2022-07-24 10:37:13 +02:00

muli commented

2022-07-24 10:41:14 +02:00

Stellt sich raus "stacking things is hard". Das Menü muss nicht nur einen höheren z-Index haben, als die Box, sondern es konkurrieren verschiedenen Stacking-Kontexte miteinander.

Heißt, dass die Lösung ist in der DOM-Hierarchie soweit nach oben zu gehen, dass man die beiden Elemente erwischt, die in der Hierarchie auf einer Ebene sind. Die konkurrieren dann wirklich um einen Platz an der Sonne und hier den z-Index zu setzen funktioniert dann auch wie gedacht.

Stellt sich raus "stacking things is hard". Das Menü muss nicht nur einen höheren z-Index haben, als die Box, sondern es konkurrieren verschiedenen Stacking-Kontexte miteinander. Heißt, dass die Lösung ist in der DOM-Hierarchie soweit nach oben zu gehen, dass man die beiden Elemente erwischt, die in der Hierarchie auf einer Ebene sind. Die konkurrieren dann wirklich um einen Platz an der Sonne und hier den z-Index zu setzen funktioniert dann auch wie gedacht.

muli referenced this issue

2022-07-24 10:42:32 +02:00

#110_mobiles_menu_hinter_card_box #112

muli referenced this issue

2022-07-24 10:45:19 +02:00

fix: Honor stacking context to fix vanishing menu. #113

muli commented

2022-07-24 10:48:23 +02:00

Gefixt in: #113

Gefixt in: https://git.wtf-eg.de/ag_kommunikation/webseite/pulls/113

muli closed this issue

2022-07-24 10:48:23 +02:00