CSS - 改进标签折叠 - 位置粘性

问：

我正在尝试创建在用户滚动时相互堆叠的选项卡。我使用 position： sticky 来做到这一点。它运行良好，但我想实现两件事。

第一件事是我想在上一张牌粘起来后开始移动下一张牌。也就是说，一旦第一张牌接触到顶部，第二张牌才会开始移动。在那之前，它会像现在在演示中一样卡在底部等待。同样，第三张牌只有在第二张牌接触顶部后才会开始移动。

我想实现的第二件事是使卡片按 1、2、3 的顺序出现。目前，它的顺序是 3,2,1。我尝试过用 z-index 更改它并以不同的方式重新排列它，但我还没有弄清楚。在演示中，我表示了我最终想要实现的目标。

你能告诉我如何做到这一点吗？我会只使用 CSS 还是必须使用 javascript？

完整演示：https://codepen.io/mw3s/pen/jOdBNzO

<div class="tabs-container">
    <div class="tab">
        <span>1</span>
        <div class="tab-content">..</div>
    </div>
    <div class="tab">
        <span>2</span>
        <div class="tab-content">..</div>
    </div>
    <div class="tab">
        <span>3</span>
        <div class="tab-content">..</div>
    </div>
</div>

.tab {
    position: sticky;
    top: 0;
}