本文目錄導讀：

1. HTML結(jié)構(gòu)
2. CSS樣式

CSS控制文字在圖片中的位置

在CSS中，我們可以使用相對定位（relative positioning）或***定位（absolute positioning）來控制文字在圖片中的位置，這里，我們將介紹如何使用相對定位將文字放置在圖片的右下角。

HTML結(jié)構(gòu)

我們需要一個包含圖片和文字的HTML元素，可以使用div元素來包裹圖片和文字，并設置相應的CSS樣式。

<div class="image-wrapper">
  <img src="your-image-url" alt="Your Image">
  <div class="text-wrapper">Your Text</div>
</div>

CSS樣式

我們將使用CSS來設置圖片和文字的樣式，并將文字放置在圖片的右下角。

.image-wrapper {
  position: relative; /* 相對于其***近的定位祖先元素（如果有）進行定位 */
  width: 300px; /* 假設圖片寬度為300像素 */
  height: 200px; /* 假設圖片高度為200像素 */
}
.image-wrapper img {
  width: 100%; /* 圖片寬度填充其父元素 */
  height: 100%; /* 圖片高度填充其父元素 */
}
.text-wrapper {
  position: absolute; /* 相對于其***近的定位祖先元素（如果有）進行定位 */
  right: 0; /* 右側(cè)距離為0 */
  bottom: 0; /* 底部距離為0 */
}

在這個示例中，我們首先將.image-wrapper元素設置為相對定位，并指定了寬度和高度，我們將圖片設置為填充其父元素的寬度和高度，我們將.text-wrapper元素設置為***定位，并將其右側(cè)和底部距離設置為0，以使其位于圖片的右下角。

這種方法要求圖片和文字的容器元素（在本例中為.image-wrapper）具有明確的寬度和高度，如果容器元素的寬度和高度不確定，則可能需要使用其他方法來確定文字的位置。