Question

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

它也出现在上传图片的夏令营模式中，所以看起来所有模态都会出现在这些导航栏后面。

Answer 1

导航栏是固定的，这意味着z-index只相对于它的孩子。简单的解决方法是简单地增加外部模态容器的上边距，使其略微向下推到页面并从导航栏后面向外推。

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

Answer 2

为了解决问题，我在CSS中包含了一个超高/* comment */值（1000000）用于模态背景（模态背后的阴影），以及稍高一点（1000001）的模态：

std::bitset

希望它有所帮助！

Answer 3

现在发布答案已经太迟了，但是我今天在Modal弹出窗口和导航栏上也遇到了类似的问题。

使用JavaScript将显示弹出窗口时导航栏的z-index设置为零，反之亦然。

注意：使用whateverElement.style.zIndex = 0代替whateverElement.style.z-index = 0，因为javascript处理-作为减法运算符。

Answer 4

我今天遇到了这个问题，并提出了一个不涉及修改CSS的替代解决方案。如果使用的是MVC，则可以使用section标签并在布局中（主体中的任何位置）渲染模式。这将导致默认模式行为起作用，并且不再将其隐藏在导航栏后面。

在_layout.cshtml上（在body标记内）：

<body>
    <!--... OTHER Layout/header code...-->

    @RenderSection("modals", required: false)

</body>

并在您看来：

@section modals{
    @Html.Partial("_MyModal")
}

类似的东西也可以在其他语言中使用，最重要的是不需要修改CSS。

Answer 5

您需要调整CSS中的z-index。导航的z-index数量高于其他所有数字。因此，要调整它，您需要为模态弹出窗口添加更高的z-index。代码看起来像

例如z-index：3;

为了能够这样做，你必须为弹出窗口设置一个位置。

例如position：absolute;

设置位置后，您还可以将此代码放入CSS

中，进一步调整位置

顶部：500px;左：500px的;

这意味着您放置绝对位置的容器从顶部移动500像素，从左移500像素。

如果您无法理解z-index是什么。我会为你提供一张照片。