position: sticky 不能实现卡片堆叠，真正起作用的是 position: relative + z-index + transform；sticky 仅负责滚动吸附，不创建层叠上下文或视觉错位。
直接说结论：position: sticky 本身不用于“堆叠卡片”，它只负责滚动吸附；真要实现视觉上的卡片堆叠（错落+前后遮挡），必须搭配 position: relative + z-index + transform。把 sticky 当成堆叠手段，是常见误解。
为什么不能直接用 sticky 实现堆叠
position: sticky 的行为本质是「相对定位 + 滚动时切为固定定位」，它不改变元素在文档流中的位置基准，也不自动创建层叠关系。一张 sticky 卡片和另一张 sticky 卡片，默认仍按文档流顺序平铺，不会上下错开，更不会自动分层。
- 现象：写了
position: sticky; top: 0;，但多张卡片还是上下紧贴、无遮挡、无深度感 - 原因：
sticky不触发新层叠上下文，也不影响z-index的比较范围——但它自己又没设z-index，所以所有卡片都在同一默认层级 - 关键限制：
sticky元素的堆叠行为完全依赖其父容器是否形成层叠上下文，以及兄弟元素是否主动设了z-index
真正起作用的三要素：relative + z-index + transform
堆叠效果靠的是人为制造视觉错位和层级分离，不是靠 sticky 自动完成的：
- 每张卡片必须设
position: relative—— 否则z-index无效，transform也容易意外触发新层叠上下文 -
z-index值要严格递增（如10、20、30），不能全写1或留默认auto - 位移统一用
transform: translateY(-Xpx)，不用top—— 避免破坏文档流高度，也防止与sticky的滚动吸附逻辑冲突 - 缩放用
transform: scale(0.96)模拟真实卡片被拿起的轻微压弯感，别低于0.85，否则文字可读性崩坏
如果非要让 sticky 和堆叠共存，注意这几点
比如你有一组卡片，顶部需要一个 sticky 标题栏，下面才是堆叠卡片组——这时两者的层叠关系极易出问题：
立即学习“前端免费学习笔记（深入）”；
-
sticky标题必须显式设z-index: 100以上，否则会被后面堆叠卡片中z-index: 30的那张盖住（因为堆叠卡片组若没包裹在独立层叠上下文中，它们的z-index是和标题平级比较的） - 别在堆叠卡片的父容器上加
transform、opacity: 0.99或will-change: transform—— 这会创建新层叠上下文，导致内部卡片的z-index只在该容器内生效，无法和外部sticky标题竞争 - 如果堆叠卡片用了
grid或flex布局，确保每个卡片子项都有position: relative，且z-index值按 DOM 顺序严格上升 - 滚动容器本身不能设
overflow: hidden，否则上移的卡片会被裁掉一部分
最易被忽略的一点：sticky 元素一旦进入吸附状态，它的绘制层级就固定在当前层叠上下文中；而堆叠卡片的 transform 很可能悄悄创建了另一个层叠上下文。这两者不在同一“层级战场”里，光调 z-index 不一定管用——得靠父容器的层叠上下文设计来对齐战场。
