【发布时间】：2021-01-20 22:27:43
【问题描述】：
在这里查看演示：https://p6msv.csb.app/
我不知道如何让这个“更多信息”模式位于屏幕上的所有其他元素之上。
以下是所需的堆叠顺序，首先是最高堆叠的元素：
- 模态
- 导航打开
- 标题
- fullpage.js 部分
有人看到我遗漏的东西吗？
【问题讨论】：
标签： css reactjs z-index fullpage.js
【发布时间】：2021-01-20 22:27:43
【问题描述】：
我不太清楚您的问题，但对于模式，请考虑使用 fullpage.js 选项 normalScrollElements，甚至在使用 fullpage_api.setAllowScrolling(false) 打开时禁用整个 fullPage.js 滚动。
此外，任何固定元素都应放置在 fullPage.js 包装器之外。这是一些浏览器在处理 3d css 转换时的错误。
如果由于某种原因无法移动它，您可以尝试使用fixedElements 选项，甚至使用scrollBar:true 或css3: false 远离3d 变换。
更多关于the fullpage.js documentation上的所有这些选项和方法
【讨论】：
-
感谢您的回复。我的问题如下：如果您打开我的演示并单击“更多信息”按钮，则会弹出一个模式。该模式的顶部当前位于标题下方。我希望该模式位于页面上所有元素的顶部以提供全屏效果。
-
固定位置就行了？正确使用 CSS
position: fixed -
标头已设置为固定位置。我遇到了 z-index 问题，我的标头 z-index 设置为 1，但是当我将 z-index > 1 添加到模态容器时，没有任何反应。这就是我希望每个元素位于页面上的方式： modal = z-index: 2 header = z-index: 1 fullpage.js section = z-index: 0 模态设置为绝对位置，但添加 z-index 确实不会影响任何事情。
-
将它们放在整页包装之外