设置position: absolute后图片消失，relative无法满足云朵布局需求

问题原因分析 #

• 绝对定位后图片消失：你的CSS里margin-top/margin-left等值未添加单位（比如px），浏览器无法解析无效数值，导致元素位置异常，可能跑到可视区域外；另外，绝对定位元素默认参照最近的已定位父元素（设置了position: relative/absolute/fixed的元素）定位，若没有这类父元素，会相对于整个视口定位，也可能导致图片移出视野。
• 相对定位无法达到预期位置：相对定位是基于元素自身原本在文档流中的位置偏移，受原位置限制，无法自由放置到页面任意位置。

修复方案 #

1. 修正绝对定位的CSS代码 #

给margin值补上单位，同时给父容器设置position: relative，让云朵以父容器为基准定位，避免跑到视口外：

/* 给包裹云朵的父容器添加相对定位，比如body或自定义容器 */
.cloud-container {
  position: relative;
  /* 确保父容器有足够高度，避免内容塌陷 */
  min-height: 500px;
}

.BottomCloud {
  position: absolute;
  margin-top: 200px; /* 添加px单位 */
  margin-left: 300px;
}

.TopCloud {
  position: absolute;
  margin-top: 100px;
  right: 300px; /* 用right替代margin-right，更直观控制绝对定位元素的右侧位置 */
}

也可以直接用top/left/right属性控制位置，比margin更可靠：

.BottomCloud {
  position: absolute;
  top: 200px;
  left: 300px;
}

.TopCloud {
  position: absolute;
  top: 100px;
  right: 300px;
}

2. 验证父容器的定位与尺寸 #

如果父容器未设置position: relative，绝对定位的云朵会以整个页面视口为参照，可能因数值过大跑到屏幕外。给父容器加上position: relative后，云朵的定位会以父容器边界为基准，更容易控制位置。

内容的提问来源于stack exchange，提问作者Anthony Newton