css - 当固定标题即将滚动到视线之外时，我们可以让它们作为一个块滚动出去吗？

Question

我正在尝试创建堆叠卡片效果 - 当我们在列布局中有三张卡片时，卡片会缩小并且仅在我们向下滚动时显示标题。最后，我们将在视口顶部看到 3 个标题堆叠在一起。这是我想不通的——我们怎样才能让 3 个标题作为一个块滚动到视线之外？

我现在所拥有的不起作用 - 当我滚动时，标题 3 将覆盖标题 2，然后是标题 1。

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header {
    height: 10vh;
    width: 80vw;
    text-align: center;
    position: sticky;
}
.header1 {
    background-color: peachpuff;
    top: 0;
}
.header2 {
    background-color: teal;
    top: 10vh;
}
.header3 {
    background-color: tomato;
    top: 20vh;
}

.content {
    height: 60vh;
    width: 80vw;
}
.content1 {
    background-color: peachpuff;
}
.content2 {
    background-color: teal;
}
.content3 {
    background-color: tomato;
}

.before, .after {
    text-align: center;
    height: 100vh;
}

 <div class="before">
    <h1>CONTENT BEFORE CARDS</h1>
</div>

<div class="container">
    <div class="header header1">   
        <h1>CARD 1 HEADER</h1>
    </div>
    <div class="content content1"></div>
    <div class="header header2">
        <h1>CARD 2 HEADER</h1>
    </div>
    <div class="content content2"></div>
    <div class="header header3">
        <h1>CARD 3 HEADER</h1>
    </div>
    <div class="content content3"></div>
</div>

<div class="after">
    <h1>CONTENT AFTER CARDS</h1>
</div>

标签： css