HTML子Div无法定位到父Div底部的问题排查

你的问题出在**.image-container的高度塌陷**上，导致.user-info的绝对定位参考容器没有实际高度，bottom:0自然无法定位到图片底部。

为什么会这样？ #

你给.image-container内的所有子元素（包括.coverimage、.activity-container、.country、.user-info）都设置了position: absolute，绝对定位的元素会完全脱离文档流，不会为父容器贡献任何高度。这就导致.image-container的实际高度变成了0——它的上下边界重合在一起，所以bottom:0和top:0的位置是一样的，看起来.user-info就被"向上推移"了。

修复方案（两种常用方法） #

方法1：用aspect-ratio固定容器宽高比

如果你的封面图片有固定的宽高比（比如示例图片是1024x686，宽高比≈1.49），可以给.image-container添加aspect-ratio属性，让容器根据宽度自动计算出和图片一致的高度：

.image-container {
  position: relative;
  width: 100%;
  display: inline-block;
  background-color: blue;
  aspect-ratio: 1024/686; /* 匹配你的封面图片宽高比 */
}

这样容器会保持和图片相同的比例，.user-info设置bottom:0; left:0就能正确定位到容器（也就是图片）的左下角。

方法2：让图片撑开容器高度

把.coverimage的绝对定位去掉，改用object-fit来保证图片填充容器，这样图片会留在文档流里，自动撑开.image-container的高度：

.coverimage {
  border-radius: 30px;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，填充整个容器 */
}

这种方法更适合响应式场景，容器高度会随图片自适应，不需要硬编码宽高比。

额外优化 #

你还可以给.user-info添加width:100%，确保它的背景色能铺满图片底部的宽度，视觉效果更完整：

.user-info {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: red;
  width: 100%; /* 新增：铺满容器宽度 */
}

内容的提问来源于stack exchange，提问作者A. Vreeswijk