使用position: sticky实现堆叠卡片时最后一张无法正常固定

问题核心原因 #

position: sticky的本质是在父容器的滚动范围内，让元素到达指定位置后保持固定。一旦父容器的边界滚出视口，sticky元素就会失去固定状态，随父容器一起滚动。

你的场景里，所有卡片都放在flex-direction: column的.stack-cards容器中，最后一张卡片设置top:120px，但父容器的高度仅为所有卡片高度+gap的总和。当滚动到页面下方时，父容器的底部会先于最后一张卡片的top:120px定位位置离开视口——此时父容器没有足够的空间支撑最后一张卡片维持sticky状态，导致它随父容器向上滚动，最终覆盖下方的.spacer。

解决方案 #

给父容器.stack-cards设置足够的最小高度，确保它能支撑最后一张卡片的sticky定位需求。最简单的方式是基于视口高度+最后一张卡片的top值计算：

.stack-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-block: 40px;
  /* 最小高度 = 视口高度 + 最后一张卡片的top值 */
  min-height: calc(100vh + 120px);
}

额外注意点 #

• sticky元素的粘性范围完全由父容器决定，和整个文档无关。
• 父容器不能设置overflow: hidden/auto/scroll，否则sticky特性会直接失效。
• 每张卡片的top值递增时，要确保父容器的高度能覆盖最大的top值+卡片自身高度，否则都会出现类似问题。

内容的提问来源于stack exchange，提问作者Zayn Ali