SVG 渲染在一切之上

Question

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

Google Charts 和 Material Icons 都呈现在日期选择器 (https://github.com/nickeljew/react-month-picker) 的顶部，如下所示...？？我们改变了日期选择器，同样的事情仍然发生。有什么线索吗？

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

Answer 1

问题

问题是 div 类 Settings-settings-1316548938 看起来像这样：

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

position: fixed; 创建一个 stacking context，它包装了 .month-picker 尝试创建的新 stacking context（使用 position: relative 和 z-index: 99999999）。

因为stacking context的数量不多于：

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

并且.month-picker 是来自.Settings-settings-1316548938 的内部stacking context，这是导致问题的原因。

解决方案

简单：

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

为什么？

因为position: fixed; 创建了一个新的stacking context 但没有z-index 属性，所以元素按出现顺序堆叠。所以svg 元素在日期选择器元素之后，这就是您需要指定@987654347 的原因@ 在你的 Settings-settings-1316548938 类上。

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

希望这会有所帮助！