粘性堆叠

往下滚:后到的卡片压住先来的

01 · Sticky

每张卡 position: sticky; top: 0——布局层面就完成了堆叠,JS 一行都不需要。

02 · 覆盖

DOM 顺序天然决定层叠,后来者居上,z-index 不用管。

03 · 增强

被盖住的卡片轻微缩小变暗,是 JS 读下一张卡的进场进度算出来的——去掉也成立。

04 · 阶梯

top 依次 +2rem,牌堆的"边"就露出来了。

demo 的配色排版是占位 —— 抄机制,不抄样式(库规范铁律 6)