如何让文本块始终覆盖在图片上方，不受图片宽度变化影响

问题核心：你设置的.container默认是块级元素，宽度占满父容器，所以绝对定位的.text-block是相对于这个满宽容器定位的，而非图片的实际宽度。当把图片宽度改成50%时，容器还是满宽状态，文本自然留在原位置，没法跟着图片同步移动。

解决方法 #

给.container添加display: inline-block;（或者width: fit-content;），让容器宽度自适应图片的宽度，这样绝对定位的文本块就会相对于图片所在的容器定位，始终保持在图片内部的相对位置。

修改后的代码 #

CSS 代码

.container {
  position: relative;
  font-family: Arial;
  display: inline-block; /* 关键：让容器宽度随图片自适应 */
}

.text-block {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: black;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}

HTML 代码

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div class="container">
    <img src="https://xofarragio.com/resources/graphics/placeholder_1920x1280_01.png" alt="Nature" style="width:50%;">
    <div class="text-block">
      <h4>Testing</h4>
      <p>This is a test</p>
    </div>
  </div>
</body>

</html>

补充说明 #

如果需要让带图片的容器居中显示，可以给父元素（比如body）添加text-align: center;，或者给.container设置margin: 0 auto;（这种场景下用width: fit-content;替代display: inline-block;适配性更好）。

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