粘性 header z-index 低於覆蓋 z-index 但仍出現在前面

Question

我有一個粘性 header 需要一些 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%);
}

由於某種原因，粘性 header 顯示在模態疊加層上方，即使它明確具有更大的 z-index 值。

html結構的要點是：

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

如果這與此問題有關，則粘性標題也會包裝 angular ng-content 。

任何幫助表示贊賞！

Answer 1

這通常是由於對堆疊索引的誤解造成的。

調試它的最簡單方法是在<div class="modal-container">的每個父元素上手動粘貼一個巨大的 z-index，直到找出有問題的元素。

猜測一下，您已經在<div class="page-content">上設置position:relative ，並且您給它的z-index小於 100。