轉自：https://zhidao.baidu.com/question/1495805873400412779.html
例子1：
html中可以用css相對定位讓文字在圖片的上面。
1、新建html文檔，在body標簽中添加一個div標簽，然后在div標簽中添加img標簽和p標簽，這時文字和圖片是分開的：
2、分別為div標簽和p標簽添加“position: relative;”和“position: absolute;”，這時p標簽和div標簽就形成了相對關系：
3、為p標簽設置“top”和“left”屬性，屬性值為距離頂部和左側的長度，這時文字就會顯示在圖片的上面：
例子2：
文字在圖片上方的 效果圖
參考代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*div1下面 包含着1個圖片和1段文字*/
#div1{
position: relative;/*相對定位*/
width: 267px;
height: 140px;
}
/*圖片部分的設置*/
#img1{
/*position: static;默認定位,可以省略*/
width: 100%;
height: 100%;
}
/*文字的設置*/
#span1{
position: absolute;/*絕對定位*/
width: 100%;
bottom: 0px;/*離底下0像素*/
left: 0px;/*離左邊0像素*/
text-align: center;
font-size: 18px;
color: white;
}
</style>
</head>
<body>
<div id="div1">
<span id="span1">愜意的海岸,旖旎的風景</span>
<img src="img/hbfj.jpg" id="img1" />
</div>
</body>
</html>