CSS中可以使用相對定位(relative positioning)或***定位(absolute positioning)將文字移動到圖片旁邊。
相對定位是相對于元素在文檔流中的位置進行定位,而***定位是相對于瀏覽器窗口進行定位。
使用相對定位時,可以通過設(shè)置元素的position屬性為relative,然后使用top、right、bottom、left屬性來調(diào)整元素的位置,要將文字移動到圖片上方,可以這樣做:
img { position: relative; } span { position: relative; top: -10px; left: 10px; }
在這個例子中,文字會被移動到圖片的上方和右邊,可以根據(jù)需要調(diào)整top和left屬性的值來改變文字的具體位置。
另一種方法是使用***定位,***定位可以通過設(shè)置元素的position屬性為absolute來實現(xiàn),與相對定位不同,***定位的元素會脫離文檔流,并相對于瀏覽器窗口進行定位,要將文字移動到圖片右上角,可以這樣做:
img { position: absolute; top: 0; right: 0; } span { position: absolute; top: 0; right: 10px; }
在這個例子中,文字會被移動到圖片的右上角,可以根據(jù)需要調(diào)整top和right屬性的值來改變文字的具體位置,需要注意的是,***定位的元素會覆蓋在頁面的其他內(nèi)容上,因此在使用時需要謹慎。