Grid布局中position:absolute失效，如何在图片上添加带背景色的文本块？

嘿，这个问题我太熟悉啦！你的position: absolute之所以没按预期工作，核心原因是没给文本块的父容器设置定位上下文。

问题原理 #

默认情况下，所有HTML元素的position属性都是static。当你给元素设置position: absolute时，它会向上寻找最近的非static定位的父元素作为定位基准。如果找不到这样的父元素，它就会相对于整个文档定位——这就是为什么你的文本块没贴在图片底部的原因。

修复方案 #

只需要给每个图片所在的父<div>添加position: relative，同时完善文本块的样式（比如背景色、内边距），就能实现你想要的效果：

修改后的完整代码 #

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem; /* 可选：给网格加间距，视觉更舒适 */
}

/* 给图片的父容器设置定位上下文 */
.image-wrapper {
  position: relative;
  width: 100%; /* 让容器适配网格列宽 */
}

.image-wrapper img {
  width: 100%;
  height: auto; /* 保持图片比例 */
  display: block; /* 消除图片默认的底部空白间隙 */
}

.text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0; /* 让文本块自动铺满容器宽度 */
  background-color: rgba(0, 0, 0, 0.7); /* 半透明黑背景，突出文字 */
  color: white;
  padding: 0.5rem 1rem;
}

<div class="container">
  <div class="image-wrapper">
    <img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg">
    <div class="text">第一张图的文本</div>
  </div>
  <div class="image-wrapper">
    <img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg">
    <div class="text">第二张图的文本</div>
  </div>
</div>

额外优化说明 #

• 给.image-wrapper设置width: 100%，让它和网格列宽匹配，图片会自适应容器大小
• 图片添加display: block，可以去掉图片默认的底部空白间隙
• 使用rgba背景色，既能突出文字，又不会完全遮挡图片内容
• 给.text设置right: 0，无需手动设置宽度，文本块会自动铺满容器宽度

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