粘性标题未堆叠在可滚动 Div 中的绝对容器顶部

Question

我正在开发一个项目，其中页面顶部有一个绝对容器，可滚动容器内有多个粘性标题。但是，滚动时粘性标题不会堆叠在绝对容器的顶部。相反，它们位于绝对容器后面。

粘性标题在滚动时应该保留在绝对容器的顶部，但相反，它们出现在绝对容器的后面。我尝试过调整 z-index 但似乎无法解决问题。绝对容器位于可滚动内容之外，粘性标题位于其中。

演示

HTML：

      <div class="container">
        <div class="absolute-container">Absolute container</div>

        <div class="scrollable-viewport">
          <div class="sticky-header row">Sticky header 1</div>
          <div class="content row">Test</div>
          <div class="content row">Test</div>
          <div class="content row">Test</div>
          <div class="content row">Test</div>
          <div class="content row">Test</div>
          <div class="sticky-header row">Sticky header 2</div>
          <div class="content row">Test</div>
          <div class="content row">Test</div>
          <div class="sticky-header row">Sticky header 3</div>
          ...
        </div>
      </div>

CSS：

.container {
  position: relative;
  height: 100%;
}

.absolute-container {
  position: absolute;
  height: 40px;
  display: flex;
  align-items: center;
  font-weight: 500;
  top: 0;
  left: 0;
  padding: 0.3em;
  background-color: blue;
  width: calc(100% - 16px);
  z-index: 10;
}

.scrollable-viewport {
  height: 250px;
  overflow-y: scroll;
  position: relative;
  contain: strict;
}

.sticky-header {
  position: sticky;
  background-color: green;
  z-index: 20;
  top: 0;
}

.row {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0.3em;
  width: 100%;
}

.content {
  background: yellow;
}

这就是现在的样子：

预期结果：

Answer 1

“可滚动视口”容器没有“z-index”，这就是为什么本节将在“绝对容器”下进行，该容器的“z-index”更高，为 10。如果您给出“可滚动视口” ' 'z-index' 高于 'absolute-container'，那么它应该可以工作。