CoreUI - 默认标题中的模态显示在背景后面

Question

我正在使用 Core-UI 的管理模板作为开源项目 cog1 的控制台。这很棒，但我在使用默认标头组件上的下拉菜单中的模式时遇到了问题。 显示主容器内任何组件的模态（即内容随着路由更改而呈现的位置）都可以正常工作。但是，从默认标头（作为主容器的同级）执行此操作，会使模式出现在背景后面。 我可以更改标题组件的 z-index，但这会使整个标题出现在背景前面，这是不正确的。

我在默认标题本身上添加了一个大按钮，以说明问题。这是我单击“启动演示模式”按钮时的外观：

我该怎么做才能让模态像在主容器中放置的任何其他组件一样工作？

Answer 1

长话短说，您需要将对话框移动到页面底部，以便它呈现在其他元素上方。

---

长话短说：

您需要确保正在打开的模态是 body 标记内的最后一个元素。

记住 HTML 就像将纸张堆叠在一起，第一个元素位于底部，最后一个元素位于顶部。

显然这就是 z-index 的用武之地，我们可以覆盖这个堆叠，但有时 z-index 没有帮助，在这些时候，你需要考虑对话框相对于其他元素的位置。