应使用JS动态计算或CSS自定义属性配合calc()实现响应式偏移，避免硬编码top值；需设父容器position: relative，优先用transform: translateY替代top以提升性能与稳定性。
绝对定位卡片时 top 值怎么设才不重叠又显“瀑布”感
靠手动写 top: 10px、top: 24px、top: 48px 这种硬编码，很快就会失控——加一张卡就得全调，响应式下直接失效。真正可控的做法是用 JS 动态计算，或用 CSS 自定义属性配合 calc() 做相对偏移。
常见错误现象：top 全设成固定像素值，卡片在不同屏幕宽度下堆叠错位；或者用 margin-top 混合定位，导致脱离文档流后父容器高度塌陷，下方内容上浮。
- 每张卡片的
top应基于前一张的垂直位置 + 随机/渐进偏移量（比如calc(var(--base-offset) + var(--index) * 8px)） - 必须给父容器设
position: relative，否则position: absolute的卡片会相对于 viewport 定位 - 避免用
z-index手动排序，改用 DOM 顺序 —— 后出现的卡片自然盖在前面的上面
为什么不能只靠 CSS :nth-child 给每张卡设不同 top
因为 :nth-child(n) 只能写死偏移量，无法感知卡片真实高度或容器宽度变化。一旦某张卡内容变多、换行、字体缩放，所有后续卡片的 top 就全偏了。
使用场景：纯静态、内容长度完全可控的展示页可以临时用，但只要涉及用户生成内容（UGC）、多语言、可缩放字体，就立刻失效。
立即学习“前端免费学习笔记（深入）”；
-
:nth-child(1) { top: 0; }、:nth-child(2) { top: 16px; }这类规则无法响应内容高度变化 - 移动端横屏/竖屏切换时，
top值不会自动适配，容易造成卡片挤出视口 - 若卡片用
transform: scale(0.95)微调大小，top偏移仍按原始尺寸计算，视觉错位更明显
用 transform translateY 替代 top 实现更稳定的堆叠
top 改变的是布局位置，而 transform: translateY() 是渲染层偏移，不影响其他元素占位，也避免触发重排（reflow），性能更好。
参数差异：top 值受父容器 padding 和 border 影响；translateY 则完全独立，只作用于自身渲染层。
- 推荐写法：
transform: translateY(calc(var(--offset, 0) * 1px));，配合 JS 注入 --offset 变量 - 兼容性无问题：Chrome 12+、Firefox 16+、Safari 13.1+ 都支持自定义属性 + calc + transform
- 注意不要混用：
top和transform同时设会导致行为不可预测，浏览器可能取其中一个生效
JS 动态计算偏移时最容易漏掉的边界条件
多数人只考虑卡片数量和基础间距，却忽略卡片自身高度波动、字体加载延迟、图片异步渲染带来的布局抖动。
常见错误现象：页面刚加载时卡片堆在一起，等图片加载完才突然“弹开”；或使用 font-display: swap 时，文字重排导致 getBoundingClientRect().height 取到错误值。
- 别在
DOMContentLoaded就算高度，改用requestAnimationFrame+imagesLoaded或IntersectionObserver确保内容稳定 - 对每张卡用
el.offsetHeight而不是el.scrollHeight，后者包含溢出隐藏部分，不准 - 预留 2–4px 容错空间：
top = prevTop + prevHeight + 6 + Math.random() * 4，比单纯加固定值更自然
实际堆叠效果是否“像纸牌”，关键不在 top 值多精确，而在偏移是否带轻微随机性和视觉节奏感。手写死值、忽略字体加载、忘记容器定位上下文——这三处出问题，再细的数值也没用。
