CSS圖片如何在文字上

在CSS中，您可以使用相對(duì)定位（relative positioning）或***定位（absolute positioning）來(lái)將圖片放置在文字上方，相對(duì)定位是相對(duì)于其正常位置進(jìn)行定位，而***定位則是相對(duì)于瀏覽器窗口進(jìn)行定位。

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

HTML代碼：

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

CSS代碼：

.container {
  position: relative;
}
.image {
  position: relative;
  top: -10px; /* 調(diào)整圖片位置 */
  left: 0; /* 調(diào)整圖片位置 */
}

在這個(gè)例子中，圖片會(huì)被放置在文字的上方，并且可以通過(guò)top和left屬性來(lái)調(diào)整圖片的具體位置，您可以根據(jù)需要調(diào)整這些值以達(dá)到滿意的效果。

如果您希望圖片***固定在頁(yè)面的某個(gè)位置，可以使用***定位，以下是一個(gè)使用***定位的例子：

HTML代碼：

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

CSS代碼：

.container {
  position: absolute;
  top: 10px; /* 調(diào)整容器位置 */
  left: 0; /* 調(diào)整容器位置 */
}
.image {
  position: absolute;
  top: 0; /* 圖片位于容器頂部 */
  left: 0; /* 圖片位于容器左側(cè) */
}

在這個(gè)例子中，圖片會(huì)被放置在容器的上方和左側(cè)，并且可以通過(guò)top和left屬性來(lái)調(diào)整圖片的具體位置，您可以根據(jù)需要調(diào)整這些值以達(dá)到滿意的效果。