当对 `.surrounding-image` 使用 `top` 百分比值却无视觉位移时，根本原因在于其父容器 `.planets-container` 高度塌陷（仅约39px），导致 `top: 30%` 实际计算值极小（如13px）；绝对定位元素脱离文档流，不会撑开父容器，必须显式设置父容器高度或采用更稳健的布局方案。
在您提供的代码中，.planets-container 被设为 position: relative，作为所有 position: absolute 子元素（.center-image 和 .surrounding-image）的定位上下文（containing block）。然而，该容器本身没有显式高度声明，且内部仅含绝对定位图片——这些元素完全脱离普通文档流，因此父容器高度坍缩为仅由 margin-top: 300px 和 padding-top: 5% 贡献（而 padding-top: 5% 是相对于父容器宽度计算的，非高度），最终导致容器实际高度极小（例如浏览器计算后仅约39px）。此时，top: 30% 的含义是“向上偏移父容器高度的30%”，即 30% × 39px ≈ 11.7px，肉眼几乎不可见，造成 top “不生效”的错觉。
✅ 正确解决方案如下：
1. 显式设置 .planets-container 的最小高度（推荐）
避免依赖百分比 padding 或不确定的自动高度，用 min-height 确保足够空间：
.planets-container {
position: relative;
margin-top: 300px;
min-height: 80vh; /* 占满视口80%，提供稳定参考高度 */
/* 移除 padding-top: 5%; 改用更可控的布局方式 */
}
2. 修正 nth-of-type 选择器逻辑（关键！）
您的 HTML 中所有 .surrounding-image 是连续的 元素，但 :nth-of-type(2) 匹配的是第二个 标签（即第一个环绕图），而非第二个 .surrounding-image 类——因为 :nth-of-type 按标签类型计数，不区分 class。当前结构下：
- 第1个 → .center-image
- 第2–6个 → .surrounding-image
因此，.planets-container .surrounding-image:nth-of-type(2) 实际匹配的是第2个 （即第一个环绕图），而 .surrounding-image:nth-of-type(3) 匹配第3个 （第二个环绕图）……以此类推。这虽能工作，但语义脆弱。更健壮的做法是使用 :nth-child() 或直接添加唯一 class/ID：
/* 更清晰、可维护的写法 */
.surrounding-image:first-child { top: 10%; left: 20%; } /* 第1个环绕图 */
.surrounding-image:nth-child(2) { top: 30%; left: 50%; } /* 第2个环绕图 */
.surrounding-image:nth-child(3) { top: 30%; left: 50%; bottom: 20%; }
/* ...依此类推 */
⚠️ 注意：bottom: 20% 与 top 同时设置会产生冲突（优先级取决于是否 !important），建议同一元素只用 top 或 bottom 之一，避免不可预测行为。
