CSS圖片怎么襯于文字下方

在CSS中，我們可以使用相對定位（relative positioning）或***定位（absolute positioning）來將圖片襯于文字下方，這里我們以相對定位為例，介紹具體的實現(xiàn)方法。

我們需要創(chuàng)建一個包含圖片和文字的HTML結(jié)構(gòu)，圖片可以放在文字的上方或下方，根據(jù)具體需求來決定，我們給圖片添加CSS樣式，設(shè)置其position屬性為relative，并將其z-index屬性設(shè)置為一個較小的值，這樣圖片就會襯于文字下方了。

下面是一個示例代碼：

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

<div class="container">
  <img class="image" src="image.png" alt="圖片">
  <p class="text">這是一段文字，圖片襯于下方。</p>
</div>

CSS樣式：

.container {
  position: relative;
}
.image {
  position: relative;
  z-index: -1;
}
.text {
  position: relative;
  z-index: 1;
}

在這個示例中，我們給容器、圖片和文字都添加了CSS樣式，設(shè)置了它們的position屬性為relative，并給圖片和文字分別設(shè)置了z-index屬性，由于圖片的z-index值小于文字的z-index值，所以圖片就會襯于文字下方。

需要注意的是，如果圖片本身的高度大于文字，那么圖片可能會遮擋住文字，這時，我們可以通過調(diào)整圖片的高度或者文字的字體大小等方法來解決這個問題，如果圖片和文字的排版不夠美觀，我們也可以通過調(diào)整它們的margin、padding等屬性來優(yōu)化排版效果。