SVG渲染在一切之上

Question

http://courtstatpack.com是我们遇到此问题的网站....它位于选项面板左侧的日期选择中。

Google图表和素材图标都呈现在日期选择器（https://github.com/nickeljew/react-month-picker）之上，如下所示......我们改变了日期选择器，同样的事情仍然发生。有什么线索的原因？

z-index也没有改变任何东西，因为日期选择器似乎并不关心它的z-index是什么。

Answer 1

问题

问题是Settings-settings-1316548938类.Settings-settings-1316548938 { position: fixed; } ，如下所示：

position: fixed;

.month-picker创建stacking context，其中包含position: relative正在尝试创建的新stacking context（使用z-index: 99999999和.MuiAppBar-positionFixed-2227438490）。

由于stacking context不多于：

• .Settings-settings-1316548938
• .month-picker
• .month-picker

而.Settings-settings-1316548938是来自.Settings-settings-1316548938 { position: fixed; z-index: 99; // or any other positive number } 的内部stacking context，这导致了问题。

解决方案

简单：

position: fixed;

<强>为什么吗

由于z-index创建了一个新的stacking context但没有z-index属性，因此元素按发生的顺序堆叠。因此svg元素比日期选择器元素和＃39更符合要求。 ; s为什么你需要在Settings-settings-1316548938班级上指定{{1}}。

当我谈到stacking context时，你必须明白我的意思。请点击链接阅读文章。

希望这有帮助！