CSS中,可以使用相對定位(relative positioning)或***定位(absolute positioning)來將圖片放置在文字上面,具體實(shí)現(xiàn)方式如下:
1、相對定位:將圖片相對于其正常位置進(jìn)行定位,可以通過設(shè)置position
屬性為relative
,并使用top
、right
、bottom
、left
屬性來調(diào)整圖片的位置,將圖片放置在文字上方:
<div style="position: relative;"> <p>這是一段文字。</p> <img style="position: relative; top: -10px; left: 0px;" src="image.png" /> </div>
2、***定位:將圖片相對于瀏覽器窗口進(jìn)行定位,可以通過設(shè)置position
屬性為absolute
,并使用top
、right
、bottom
、left
屬性來調(diào)整圖片的位置,將圖片放置在文字上方:
<div style="position: relative;"> <p style="position: relative; z-index: 2;">這是一段文字。</p> <img style="position: absolute; top: 0px; left: 0px; z-index: 1;" src="image.png" /> </div>
在以上代碼中,z-index
屬性用于設(shè)置元素的堆疊順序,數(shù)值越大表示元素越在上層,通過調(diào)整z-index
屬性,可以確保圖片始終顯示在文字上方,使用***定位時,需要注意圖片的位置是相對于瀏覽器窗口的,而不是其父元素,在將圖片放置在文字上方時,需要確保父元素的高度足夠容納圖片和文字。