CSS中，我們可以使用相對(duì)定位（relative positioning）或***定位（absolute positioning）來(lái)使內(nèi)容放在圖片下方。

相對(duì)定位是相對(duì)于元素在文檔流中的位置進(jìn)行定位，而***定位是相對(duì)于瀏覽器窗口進(jìn)行定位。

下面是一個(gè)使用相對(duì)定位的例子：

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

<div class="image-container">
  <img src="image.jpg" alt="示例圖片">
  <div class="text">這是圖片下方的文字內(nèi)容</div>
</div>

CSS樣式：

.image-container {
  position: relative; /* 開(kāi)啟相對(duì)定位 */
}
.image-container img {
  width: 100px; /* 圖片寬度 */
  height: 100px; /* 圖片高度 */
}
.image-container .text {
  position: relative; /* 開(kāi)啟相對(duì)定位 */
  top: 10px; /* 文字距離圖片下方的距離 */
  left: 0; /* 文字位置 */
}

在這個(gè)例子中，我們給.image-container和.text都開(kāi)啟了相對(duì)定位，這樣，.text就可以根據(jù).image-container的位置進(jìn)行定位了，我們通過(guò)top屬性來(lái)控制文字距離圖片下方的距離。

***定位也可以達(dá)到類似的效果，只不過(guò)它是相對(duì)于瀏覽器窗口進(jìn)行定位的，在使用***定位時(shí)，我們需要給元素指定一個(gè)z-index屬性，來(lái)控制元素的堆疊順序。