jquery - 为什么我的覆盖层无法覆盖 Bootstrap 导航栏？

Question

我正在尝试在我的元素中添加覆盖，以保护用户在内容完全下载之前不会进行大量交互。这就是为什么我添加了覆盖层，如下所示:

.overlay {
  opacity: 0.5; 
  background: #000; 
  width: 100%;
  height: 100%; 
  z-index: 10;
  top: 0; 
  left: 0; 
  position: fixed; 
}

但问题是覆盖层可以覆盖除 Bootstrap 导航栏之外的整个页面的 100%。请帮助我如何覆盖 Bootstrap 导航栏上的覆盖层。

<div class="overlayIndex"></div>
<div class="navbar navbar-default navbar-static-top navbar-fixed-top">
  <div class="container">
    <div class="row">.......</div>
  </div>
</div>
<div ng-view="" autoscroll="true"></div>

Answer 1

将您的 z-index 设置为 1031。Bootstrap 的 navbar-fixed-top 使用的 z-index 为 1030。将其设置为高于此值应该允许您的叠加层覆盖整个视口(viewport)。

navbar-fixed-top 类的 Bootstrap CSS:

.navbar-fixed-top {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
}