bootstrap弹出模态重叠页面header

Question

我正在尝试创建一个网页，其中 header 始终位于其他所有内容之上。如果我向弹出窗口添加一个 bootstrap 模式，它会有一个灰色区域覆盖 header.

我已经尝试为我的红色背景 header 元素和我的 modal-popup 元素设置 z-index，但这只会导致模态灰色框超过我的红色我试图避免的导航栏。

https://jsfiddle.net/martinradio/u03f1zyo/21/

Answer 1

您的 Header 有默认位置，即 位置：静态；

改为：

CSS

header{
    position: relative;
    z-index: 1041;
}

这将解决您的问题。如果你想让你的 header 以后有粘性。 position: fixed 也可以。您应该避免触摸模态框 z-index，而是根据具体情况更改 z-index 组件。

Answer 2

当模式弹出时，它在 DOM 的顶层创建了一个 div 元素，我遇到了类似的问题并设置了 z-index 解决了它：

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