0

我有一个粘性标题，需要一些 z-index 位于页面内容的前面。

粘头scss是：

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

在页面的内容中，我有一个“模态视图”，其中包含modal-container我想要显示在整个页面上方的叠加 () 元素。模态 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-index 值。

html结构的要点是：

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

ng-content如果与此问题有关，则粘性标题也会包装一个角度。

任何帮助表示赞赏！

4

1 回答 1

2

这通常是由于对堆叠索引的误解造成的。

调试它的最简单方法是在 的每个父元素上手动粘贴一个巨大的 z-index，<div class="modal-container">直到您找出哪个是有问题的元素。

猜测一下，您已经设置position:relative了<div class="page-content">，并且您给它的 az-index小于 100。

于 2021-01-15T02:37:43.887 回答