CSS top属性对surrounding-image类不生效问题求助

为啥top属性没效果？ #

你的.planets-container设了position: relative，但里面所有图片都是绝对定位——绝对定位的元素会“飘”出文档流，无法撑起父容器的空间，结果.planets-container的高度直接变成0了。而top用百分比的话，是按父容器的高度计算的，容器高度为0，不管设多少%的top都不会产生位移，这就是核心原因！反而left是按父容器宽度计算的，容器宽度默认是100%，所以left能正常生效。

一步步改好 #

1. 给父容器撑出高度 #

直接用视口高度设置，保证容器能覆盖整个页面垂直范围：

.planets-container {
  position: relative;
  min-height: 100vh; /* 关键：让容器高度等于浏览器窗口高度 */
  margin-top: 0; /* 删除多余的margin和padding，避免干扰定位 */
  padding-top: 0;
}

2. 简化中心图片的居中逻辑 #

原来的写法混合了top、transform和margin-top，容易混乱，改成更可靠的纯居中写法：

.center-image {
  border: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 这行让图片真正水平垂直居中 */
  width: 350px;
  height: auto;
  z-index: 1;
  background-color: transparent;
  margin-top: 0; /* 删除多余的margin-top */
}

3. 修正选择器的匹配逻辑（避免改错图片） #

因为中心图也是<img>元素，你用nth-of-type(2)选到的其实是第一个周围图，和预期可能不符。换成nth-child按子元素位置选择更精准：

/* 第一个周围图（容器内第2个子元素） */
.planets-container .surrounding-image:nth-child(2) {
  top: 10%;
  left: 20%;
}
/* 第二个周围图（容器内第3个子元素） */
.planets-container .surrounding-image:nth-child(3) {
  top: 30%;
  left: 10%;
}
/* 第三个周围图（容器内第4个子元素） */
.planets-container .surrounding-image:nth-child(4) {
  top: 60%;
  left: 20%;
}
/* 第四个周围图（容器内第5个子元素） */
.planets-container .surrounding-image:nth-child(5) {
  top: 80%;
  left: 50%;
}
/* 第五个周围图（容器内第6个子元素） */
.planets-container .surrounding-image:nth-child(6) {
  top: 70%;
  left: 80%;
}

4. 删除冲突的定位属性 #

比如第四个周围图同时设置了top:30%和bottom:20%，这会让浏览器自动计算高度，反而干扰定位逻辑，只保留top和left即可。

改完后的完整代码 #

CSS #

.planets-container {
  position: relative;
  min-height: 100vh;
}

.center-image {
  border: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  height: auto;
  z-index: 1;
  background-color: transparent;
}

.surrounding-image {
  border: none;
  position: absolute;
  width: 250px;
  height: auto;
  background-color: transparent;
  z-index: 2;
}

/* 周围图片定位 */
.planets-container .surrounding-image:nth-child(2) {
  top: 10%;
  left: 20%;
}

.planets-container .surrounding-image:nth-child(3) {
  top: 30%;
  left: 10%;
}

.planets-container .surrounding-image:nth-child(4) {
  top: 60%;
  left: 20%;
}

.planets-container .surrounding-image:nth-child(5) {
  top: 80%;
  left: 50%;
}

.planets-container .surrounding-image:nth-child(6) {
  top: 70%;
  left: 80%;
}

HTML #

<div class="planets-container">
  <img src="images/planets/137-1375528_top-earth-clip-art-free-clipart-spot-earth-removebg-preview.png" class="center-image">
  <img src="images/planets/hdplanet1-removebg-preview.png" class="surrounding-image">
  <img src="images/planets/hdplanet2-removebg-preview.png" class="surrounding-image">
  <img src="images/planets/hdplanet3-removebg-preview.png" class="surrounding-image">
  <img src="images/planets/hdplanet4-removebg-preview.png" class="surrounding-image">
  <img src="images/planets/hdplanet5-removebg-preview.png" class="surrounding-image">
</div>

现在你再调整周围图片的top属性，就能正常上下移动了。

内容的提问来源于stack exchange，提问作者Colin Maxwell