SVGs Rendering über alles

Question

http://courtstatpack.com ist die Website, auf der wir dieses Problem auftreten .... es ist auf der Datumsauswahl auf der linken Seite im Optionsbereich.

Sowohl Google Charts als auch Material Icons werden oben auf der Datumsauswahl gerendert (https://github.com/nickeljew/react-month-picker), wie unten gezeigt ... ?? Wir haben die Datumsauswahl geändert und es passiert immer noch dasselbe. Irgendein Hinweis warum?

z-Index etwas ändert sich nicht, da der Datumsauswahl nicht zu interessieren scheint, was seine z-index ist.

Answer 1

DAS PROBLEM

Das Problem ist die div mit Klasse Settings-settings-1316548938, die wie folgt aussieht:

.Settings-settings-1316548938 { 
    position: fixed; 
} 

position: fixed; schafft eine stacking context, die die neue stacking context dass .month-picker Wraps zu schaffen versucht (position: relative und z-index: 99999999 verwenden) .

Da es nicht mehr stacking context als:

• .MuiAppBar-positionFixed-2227438490
• .Settings-settings-1316548938
• .month-picker

und .month-picker ist eine innere stacking context von .Settings-settings-1316548938 dies das Problem verursacht.

DIE LÖSUNG

Ganz einfach:

.Settings-settings-1316548938 { 
    position: fixed; 
    z-index: 99; // or any other positive number 
} 

Warum?

Da position: fixed; ein neues stacking context schafft, aber ohne die z-index Eigenschaft, werden die Elemente in der Reihenfolge der occurrence.So die SVG-Elemente kommen nach als der Datumsauswahl-Element gestapelt, und das ist, warum Sie die z-index auf Ihrer Settings-settings-1316548938 Klasse angeben müssen.

Auch müssen Sie verstehen, was ich meine, wenn ich über stacking context sprechen. Also folge dem Link und lies den Artikel.

Hoffe, das hilft!