在網(wǎng)頁制作中，常常使用CSS來調(diào)整圖片的位置。但是有時(shí)候我們會(huì)發(fā)現(xiàn)圖片無法被CSS正確調(diào)整位置，這是為什么呢？

img{
position: relative;
left: 50px;
}

可能大家會(huì)這樣使用CSS調(diào)整圖片的位置，但是發(fā)現(xiàn)該CSS代碼并沒有生效，圖片依舊在頁面中待在原來的位置。這是因?yàn)椋瑘D片本身是一個(gè)內(nèi)聯(lián)元素，而內(nèi)聯(lián)元素的position屬性會(huì)被忽略。我們需要將圖片設(shè)置為塊級(jí)元素才能夠正確的調(diào)整它的位置。

img{
display: block;
position: relative;
left: 50px;
}

在上面的代碼中，我們將img元素的display屬性設(shè)置為塊級(jí)元素，這樣就可以正確的使用CSS調(diào)整它的位置了。當(dāng)然，另外一種常見的解決方法是使用外層容器元素來調(diào)整圖片的位置。

.parent{
position: relative;
left: 50px;
}
img{
position: absolute;
}

在上面的代碼中，我們使用了一個(gè)外層容器元素，將其position屬性設(shè)置為relative，然后將圖片的position屬性設(shè)置為absolute。這樣圖片會(huì)以父元素為參照來定位，從而實(shí)現(xiàn)了圖片的位置調(diào)整。

所以，遇到圖片無法被CSS正確調(diào)整位置的問題，這些方法可以幫助我們解決。要么將圖片轉(zhuǎn)為塊級(jí)元素調(diào)整（display: block），要么使用外層容器元素（position: relative）來調(diào)整圖片的位置。