CSS實現(xiàn)文字在圖片下面

在CSS中，我們可以使用相對定位（relative positioning）和***定位（absolute positioning）來實現(xiàn)文字在圖片下面的效果，相對定位是指元素相對于其正常位置進(jìn)行定位，而***定位是指元素相對于瀏覽器窗口進(jìn)行定位。

我們需要將圖片和文字的HTML元素嵌套在一個相對定位的容器中，這個容器可以是一個div元素，我們給它一個相對定位的樣式。

<div style="position: relative;">
    <img src="image.jpg" alt="圖片">
    <p>這是一段文字，它會在圖片下面顯示。</p>
</div>

在這個例子中，圖片和文字的HTML元素都是相對定位的，圖片會按照正常流程顯示，而文字則會顯示在圖片的下面。

如果我們想要讓文字距離圖片底部有一定的距離，可以使用CSS的bottom屬性來調(diào)整，我們可以給p元素一個***定位的樣式，并設(shè)置bottom屬性為20px，這樣文字就會距離圖片底部20px的距離顯示。

<div style="position: relative;">
    <img src="image.jpg" alt="圖片">
    <p style="position: absolute; bottom: 20px;">這是一段文字，它會在圖片下面顯示，并且距離圖片底部20px。</p>
</div>

在這個例子中，文字距離圖片底部的距離就是20px，我們可以根據(jù)需要調(diào)整這個距離。