在CSS中,我們可以使用position
屬性來設(shè)置圖片的坐標(biāo)。position
屬性有四種不同的值:static
、relative
、absolute
和fixed
。
static
:這是默認(rèn)值,圖片按照其在HTML中的位置進(jìn)行顯示,不受其他元素的影響。
relative
:如果設(shè)置為relative
,圖片的位置將相對于其在HTML中的原始位置進(jìn)行調(diào)整,可以通過top
、right
、bottom
和left
屬性來設(shè)置偏移量。
absolute
:如果設(shè)置為absolute
,圖片的位置將相對于其***近的非static
定位祖先元素進(jìn)行調(diào)整,如果沒有非static
定位祖先元素,那么它將相對于初始包含塊進(jìn)行調(diào)整,同樣可以通過top
、right
、bottom
和left
屬性來設(shè)置偏移量。
fixed
:如果設(shè)置為fixed
,圖片的位置將相對于瀏覽器窗口進(jìn)行調(diào)整,不會(huì)隨著頁面的滾動(dòng)而移動(dòng),同樣可以通過top
、right
、bottom
和left
屬性來設(shè)置偏移量。
下面是一個(gè)示例,展示如何在CSS中設(shè)置圖片的坐標(biāo):
img { position: absolute; top: 50px; left: 100px; }
在這個(gè)示例中,圖片將移動(dòng)到距離頁面頂部50像素、距離頁面左側(cè)100像素的位置。