css怎么实现文字在img上不使用绝对定位

要实现文字在图片上的效果，而又不使用绝对定位，我们可以使用CSS的Flexbox布局或者Grid布局来达到这个目的。以下是一个使用Flexbox布局实现的示例：

.image-container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 300px; /* 设置容器高度 */
}

.image-container img {
  width: 100%; /* 图片宽度100% */
  height: auto; /* 高度自适应 */
}

.text-on-image {
  color: white; /* 设置文字颜色 */
  font-size: 20px; /* 设置文字大小 */
}

<div class="image-container">
  <img src="path-to-your-image.jpg" alt="描述文字">
  <div class="text-on-image">这里是图片上的文字</div>
</div>

在这个例子中，`.image-container` 使用了 `display: flex` 来启用Flexbox布局，`align-items: center` 和 `justify-content: center` 分别实现垂直和水平居中对齐。这样，无论图片大小如何变化，文本都将保持在图片的中心位置，而不需要绝对定位。