すべての上にSVGをレンダリング

Question

http://courtstatpack.comは、この問題が発生しているWebサイトです....オプションパネルの左側の日付選択にあります。

次の図のように、Googleグラフとマテリアルアイコンの両方が日付選択ツール（https://github.com/nickeljew/react-month-picker）の上にレンダリングされていますか？日付ピッカーを変更しましたが、同じことが起こります。任意の手掛かりはなぜですか？日付ピッカーはそのZインデックスが何であるかを気にするようには思えないよう

のz-indexが、どちらか何も変更しません。

Answer 1

PROBLEM

問題は、次のようになりますクラス Settings-settings-1316548938と divである：（ position: relativeと z-index: 99999999を使用して）

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

position: fixed;新しいstacking contextその.month-pickerを作成しようとしているラップstacking contextを作成します。

よりstacking context以上存在しないので：

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

と.month-pickerは、これが問題を引き起こしている.Settings-settings-1316548938から内側stacking contextあります。

SOLUTION

簡単：

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

なぜ？

position: fixed;が新しいstacking contextを作成しますが、z-index財産ずに、要素はSVG要素は、日付ピッカー要素よりも後に来て、あなたがあなたのSettings-settings-1316548938クラスにz-indexを指定する必要が理由ですoccurrence.Soの順に積層されているので。

また、私がstacking contextについて話しているとき、私が何を意味するのか理解しておく必要があります。だから、リンクをたどって記事を読んでください。

希望すると便利です。