Html 模态出现在固定导航栏后面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34755770/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
modal appear behind fixed navbar
提问by Laurensius Tony
so i have bootstrap based site with fixed navigation bar (that follow you around the page at the top) and when i want to show modal popup, it appear behind those navigation bar, how to fix?
所以我有一个基于引导程序的站点，带有固定的导航栏（跟随你在顶部的页面周围），当我想显示模式弹出窗口时，它出现在那些导航栏后面，如何修复？
and i using margo template from graygrids
it also appear in summernote modals for uploading picture, so it looks like all modal will appear behind those navigation bar.
它也出现在用于上传图片的summernote模态中，所以看起来所有模态都会出现在那些导航栏后面。
回答by gbruscatto
To solve the problem I included in the CSS a super high z-indexvalue (1000000) for the modal-backdrop (the shadow behind the modal), and a little bit higher one (1000001) for the modal:
为了解决这个问题，我在 CSS 中z-index为模态背景（模态背后的阴影）添加了一个超高值（1000000），为模态添加了一个更高的值（1000001）：
.modal-backdrop {
z-index: 100000 !important;
}
.modal {
z-index: 100001 !important;
}
Hope it helps!
希望能帮助到你！
回答by Korgrue
The navbar is fixed, meaning z-index is only relative to it's children. The simple fix is to simply increase the top margin on the outer modal container to push it down the page slightly and out from behind the navbar.
导航栏是固定的，这意味着 z-index 仅相对于它的子项。简单的解决方法是简单地增加外部模态容器的顶部边距，将其从导航栏后面稍微向下推到页面上。
Otherwise, your modal markup has to sit in your header and you need to give it a higher z-index than the z-index of the parent navbar.
否则，您的模态标记必须位于标题中，并且您需要为其提供比父导航栏的 z-index 更高的 z-index。
回答by TOMP
This is too late to post the answer, however I've had a similar problem today with Modal popup and a navbar.
现在发布答案为时已晚，但是我今天在 Modal 弹出窗口和导航栏上遇到了类似的问题。
Used javascript to set z-index of the navbar to zero when the popup is displayed and vice versa.
使用 javascript 在显示弹出窗口时将导航栏的 z-index 设置为零，反之亦然。
Note: use whateverElement.style.zIndex = 0instead of whateverElement.style.z-index = 0as javascript handles -as subtraction operator.
注意：使用whateverElement.style.zIndex = 0而不是whateverElement.style.z-index = 0作为 javascript 句柄-作为减法运算符。
回答by Andy B
I ran into this today and came up with an alternate solution that doesn't involve modifying the CSS. If you are using MVC, you can use a section tag and render the modal in the layout (anywhere in the body). This causes the default modal behavior to work and no longer hides it behind the nav bar.
我今天遇到了这个问题，并提出了一个不涉及修改 CSS 的替代解决方案。如果您使用的是 MVC，则可以使用 section 标签并在布局中（正文中的任何位置）呈现模态。这会导致默认模式行为起作用，并且不再将其隐藏在导航栏后面。
On _layout.cshtml (inside the body tag):
在 _layout.cshtml 上（在 body 标签内）：
<body>
<!--... OTHER Layout/header code...-->
@RenderSection("modals", required: false)
</body>
and in your view:
在您看来：
@section modals{
@Html.Partial("_MyModal")
}
Something similar would work in other languages and most importantly doesn't require modifying the CSS.
类似的东西可以在其他语言中工作，最重要的是不需要修改 CSS。
回答by Plam
You need to adjust the z-index in your CSS. The z-index for your navigation is higher number than everything else. So to adjust it you need to add a z-index that is higher for your modal popup. the code would look like
您需要调整 CSS 中的 z-index。导航的 z-index 比其他任何东西都高。因此，要调整它，您需要为模态弹出窗口添加一个更高的 z-index。代码看起来像
For example z-index: 3;
例如 z-index: 3;
To be able to do this you have to set a position to your popup.
为了能够做到这一点，您必须为弹出窗口设置一个位置。
For example position: absolute;
例如位置：绝对；
After setting the position you can also adjust the position even more with putting this code in to your CSS
设置位置后，您还可以通过将此代码放入 CSS 来进一步调整位置
top: 500px; left:500px;
顶部：500px；左：500像素；
This means that the container you put a absolute position on is moved 500 pixels from the top and 500 pixels from the left.
这意味着您放置绝对位置的容器从顶部移动 500 像素，从左侧移动 500 像素。
If you cannot understand what z-index is. I will provide a picture for you.
如果您无法理解 z-index 是什么。我会提供一张图片给你。
