前言

大家在網上最常見的一種方案就是在父元素中relative，然后子元素absolute。這種方案當然好，不過帶來的一個缺點就是會改變元素的層級關系，如果在多個地方使用，這樣的層疊嵌套的關系會十分混亂。本文先暫時拋棄那種方案，給大家分享幾種CSS背景圖片定位的方案。

1.無依賴的absolute定位

在網絡上，對absolute存在這樣一個誤解，認為絕對定位absolute的使用必須要設置父元素相對定位relative。這樣的理解不能認為是錯的，只能說對定義沒有完全認識。在W3C文檔中是這樣定義absolute的：

生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位。元素的位置通過'left' , 'right' , 'bottom' , 'top' 屬性進行規定。

對這句話的理解應該如下（L : left，R：right，B：bottom，T：top）

a：當給一個元素設置position:absolute之后，如果父元素沒有設置position:relative，則該元素是通過LRBT依據可視窗口區域的左上角進行定位；如果父元素設置了position:relative，則該元素是通過LRBT依據父元素容器的左上角進行定位。

b：在生成絕對定位的元素時，不管父元素是否設置了position:relative，使用margin-top , margin-left , margin-right , margin-bottom其中的兩個非相反方向進行定位，其效果會像相對定位relative一樣，根據自身位置進行定位。但是使用margin定位與relative唯一的區別就是，absolute脫離文檔流，原來的物理空間已經消失，而relative沒有脫離文檔流，原來的物理空間依然占據。

所以，可以使用無依賴relative的absolute進行定位，定位方法是使用margin，而不能使用LRBT。

代碼如下：

上面代碼中，使用margin-left , margin-top 與 position:absolute來對圖片進行定位。使用了CSS3中的calc()來計算需要定位的值。

示例圖片如下：

2.background-position擴展語法

 在CSS3背景與邊框中，background-position屬性已經得到擴展，它允許我們指定背景圖片距離任意角的偏移量，只要我們在偏移量前面指定關鍵字即可。