相对定位Div时的空白问题及CSS解决方案咨询

这个问题我碰到过好多次了，核心原因其实是相对定位的元素会保留原本的文档流占位——你把文本移到图片上方，但它原来的位置还是空着，所以底部就出现了空白。针对图片高度和文本长度都不固定的情况，我有两个最优的CSS方案，你可以根据自己的布局需求选择：

方案一：绝对定位+容器相对定位（灵活可控） #

这种方法通过让文本脱离文档流，彻底消除它的占位空间，同时保证文本能精准定位在图片上方：

/* 包裹图片和文本的容器 */
.image-wrapper {
  position: relative;
  /* 让容器高度完全由图片决定，可选inline-block/block根据布局调整 */
  display: block;
}

/* 图片消除默认行内空隙，自适应容器宽度 */
.image-wrapper img {
  display: block;
  width: 100%;
}

/* 摘要文本 */
.summary {
  position: absolute;
  /* 定位到图片底部，可根据需求改成top:0等 */
  bottom: 0;
  left: 0;
  right: 0;
  /* 加半透明背景保证文本可读性 */
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 1rem;
  /* 处理文本过长的情况：限制最大高度超出滚动 */
  max-height: 100%;
  overflow-y: auto;
}

为什么好用： #

• 容器高度完全由图片动态决定，不管图片多高都能适配；
• 文本脱离文档流后不会产生任何占位空白；
• 可以通过top/bottom/left/right精准控制文本位置，灵活性拉满。

方案二：CSS Grid布局（现代简洁） #

如果更倾向于用现代布局方式，CSS Grid可以让图片和文本共享同一个网格单元格，自然实现覆盖效果，代码更简洁：

.image-wrapper {
  display: grid;
}

/* 让图片和文本都放在第一行第一列的网格区域 */
.image-wrapper img,
.image-wrapper .summary {
  grid-area: 1 / 1 / 2 / 2;
}

.image-wrapper img {
  display: block;
  width: 100%;
}

.summary {
  /* 对齐到图片底部，可选start对齐到顶部 */
  align-self: end;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 1rem;
  max-height: 100%;
  overflow-y: auto;
}

为什么好用： #

• 不需要依赖定位属性，语义化更好；
• 同样能完美适配图片和文本的动态高度；
• 布局逻辑更直观，代码量更少。

关键注意点 #

不管选哪种方案，都别忘了：

1. 给图片设置display: block，消除图片作为行内元素时默认的底部小空隙；
2. 给文本加背景/调整颜色，确保在图片上的可读性；
3. 处理文本过长的场景，比如用overflow-y: auto让超出部分滚动，避免文本溢出图片范围。

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