position: relative + top 不会推移兄弟元素——CSS 偏移的反直觉陷阱
布局调整时，把某个元素的 top 从 96rpx 改成 146rpx，视觉上它确实下移了 50rpx。理所当然地以为下方的兄弟元素会跟着"级联下移"——然后发现它们一动不动，两者直接叠在一起。
这不是浏览器/小程序渲染引擎的 bug，而是 CSS 规范写死的行为。理解这一点能省掉至少一轮无效改动。
现象
页面上有一个转盘区域 .turn-box，下方紧跟着 .my-coins 和 .my-winrecord 两个模块。为了把转盘整体下移 50rpx，直接把它的 top 加大：
.turn-box {
position: relative;
top: 146rpx; /* 原来是 96rpx，+50rpx */
}转盘确实下去了。但 .my-coins 和 .my-winrecord 全都没动，直接被转盘压住了。
根因
CSS 规范对 position: relative 的描述是：
相对定位元素仍然参与普通流布局，偏移是在布局完成之后才叠加上去的视觉位移。后续元素的布局锚点依然是该元素的原始位置，不受 top/left 偏移影响。
换句话说，top: 50px 只是把"渲染像素"往下挪，盒子在文档流里占据的位置原封不动。兄弟元素始终对齐的是那个"幽灵原始位置"，不跟着视觉位置走。
下面这张对比表说明了各属性对兄弟元素的影响：
| 写法 | 兄弟会跟着动吗？ |
|------|-----------------|
| position: relative; top: 50px | ❌ 不会 |
| transform: translateY(50px) | ❌ 不会 |
| position: absolute; top: 50px | ❌ 不会（已脱流） |
| margin-top: 50px | ✅ 会 |
| padding-top: 50px（父容器） | ✅ 会 |
用 top 或 transform 做位移，后续元素对你来说是"透明的"——它们完全不知道你动过。
正解
方案 A：用 margin-top 替代 top（推荐）
如果目标是"把元素下移，并且让后面所有东西跟着走"，直接用 margin-top：
.turn-box {
position: relative; /* 如需堆叠上下文可保留 */
margin-top: 50rpx; /* ← 这才会推动兄弟元素 */
}margin-top 增大的是盒子在文档流里的"占地"，兄弟元素会自然顺延。
方案 B：每个兄弟显式加偏移（兜底方案）
如果 .turn-box 的定位方式不能动（比如依赖 top 做动画），则对每个需要跟移的兄弟单独加补偿：
.turn-box { position: relative; top: 146rpx; }
.my-coins { margin-top: 162rpx; } /* 原 112rpx + 50rpx */
.my-winrecord { margin: 80rpx auto 0; } /* 原 30rpx + 50rpx */这是最后的兜底手段，可读性差，改动点散落多处，后续维护容易遗漏。
margin-top 改变文档流占位 → 后续元素自动顺延。
top / transform: translateY 只是视觉挪动 → 兄弟全部无感。
改动前先问自己："我想动的是视觉位置，还是文档流位置？" 两者不是同一回事。
排查清单
在写"下面的元素会自动跟着级联"之前，先做这三件事：
grep找到所有你期望跟移的元素- 检查每个元素的
position和margin——注意区分relative+top（不推移）vsmargin-top（推移） - 把实际需要手动调的元素列出来，逐一改，不要假设"CSS 会自己搞定"
一句话外卖
position: relative + top是"原地留坑、视觉挪人"，兄弟元素永远对着那个坑站——要推人，用margin-top。