如何向下移动文本并在图片下方放置标题

在前端开发中，可以使用CSS的定位属性来实现向下移动文本并在图片下方放置标题。具体步骤如下：

1. 首先，在HTML文件中创建一个包含文本和图片的容器，可以使用div元素来实现。例如：

<div class="container">
  <img src="image.jpg" alt="图片">
  <h1>标题</h1>
  <p>文本内容</p>
</div>

1. 接下来，在CSS文件中定义容器的样式，并使用定位属性来实现文本的向下移动和标题的放置。例如：

.container {
  position: relative;
}

.container h1 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  margin: 0;
}

在上述代码中，我们将容器的position属性设置为relative，这样可以使得内部元素的定位相对于容器进行。然后，我们使用h1元素的position属性设置为absolute，将其从正常文档流中脱离，并使用bottom和left属性将其放置在容器的底部左侧。通过设置width为100%，可以使标题的宽度与容器相同。我们还可以为标题添加背景颜色、文字颜色、内边距等样式，以使其更加突出。

1. 最后，将CSS文件链接到HTML文件中，并在浏览器中查看效果。标题应该出现在图片的下方。

这种方法适用于在图片下方放置一个固定位置的标题。如果需要在不同大小的图片下方放置标题，可以根据具体情况进行调整。