Html 粘性标题z索引低于重叠z索引，但仍显示在前面

我有一个粘滞的标题，需要一些z索引才能位于页面内容的前面

粘性头SCS是：

.sticky-header {
  position: sticky;
  top: 0;
  padding-top: $spacing;
  background-color: $background-color;
  z-index: 100;
}

在页面内容中，我有一个“模态视图”，其中包含一个覆盖（

模态容器

）元素，我希望在整个页面上方显示该元素。模式css如下所示：

.modal-container {
  z-index: 3000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
}

.modal-inner {
  z-index: 100;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

出于某种原因，粘性标题显示在模式覆盖的上方，即使它显式地具有更大的z索引值

html结构的要点是：

<div class="sticky-header">...</div>
<div class="page-content">
  <div class="modal-container">
    <div class="modal-inner">
      ...content...
    </div>
  </div>
</div>

。。。
…内容。。。

另外，如果与此问题有关，则粘性标题会包装有角度的

ng内容

感谢您的帮助
 这通常是由于对主题的误解造成的

调试它最简单的方法是手动在
的每个父元素上粘贴一个巨大的z索引，直到您发现哪个是有问题的元素

猜测一下，您在您的
上设置了
位置：相对
，并且您给它的
z索引
小于100。
…增加模态内部z索引没有帮助。