CSS如何讓文字在圖片上方？

在CSS中，您可以使用相對(duì)定位（relative positioning）或***定位（absolute positioning）來(lái)使文字出現(xiàn)在圖片上方，這兩種定位方法都可以讓您在布局中更***地控制元素的位置。

相對(duì)定位是指將元素相對(duì)于其正常位置進(jìn)行定位，而***定位則是將元素相對(duì)于瀏覽器窗口進(jìn)行定位。

下面是一個(gè)使用相對(duì)定位的例子，假設(shè)您有一個(gè)圖片和一個(gè)段落：

HTML:

<img src="image.jpg" id="myImage">
<p id="myText">這是一段文字</p>

CSS:

#myImage {
  position: relative;
  top: 0;
  left: 0;
}
#myText {
  position: relative;
  top: -50px;
  left: 0;
}

在這個(gè)例子中，圖片和段落都有相對(duì)定位，圖片位于其正常位置（top: 0），而段落則位于圖片上方50像素處（top: -50px），您可以根據(jù)需要調(diào)整這些值。

***定位也可以達(dá)到類似的效果，但需要注意的是，***定位的元素會(huì)脫離文檔流，可能會(huì)影響到其他元素的布局，在使用***定位時(shí)，需要謹(jǐn)慎考慮其對(duì)整體布局的影響。