模态出现在固定导航栏后面

Question

所以我有一个基于引导程序的网站，它有固定的导航栏（在页面顶部跟随你），当我想显示模式弹出窗口时，它出现在那些导航栏后面，如何解决？

我使用 graygrids 的 margo 模板

它也出现在用于上传图片的 summernote 模态中，因此看起来所有模态都会出现在那些导航栏后面。

原文由 PamanBeruang 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

导航栏是固定的，这意味着 z-index 仅与其子项相关。简单的解决方法是简单地增加外部模态容器的上边距，将其稍微向下推到页面下方并从导航栏后面推出。

否则，您的模态标记必须位于标题中，您需要为其提供比父导航栏的 z-index 更高的 z-index。

原文由 Korgrue 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

为了解决这个问题，我在 CSS 中包含了一个超高的 z-index 模态背景（模态后面的阴影）的值（1000000），模态背景的值（1000001）稍微高一点：

   .modal-backdrop {
    z-index: 100000 !important;
  }

  .modal {
    z-index: 100001 !important;
  }

希望能帮助到你！

原文由 gbruscatto 发布，翻译遵循 CC BY-SA 3.0 许可协议