1.background-position:表示背景定位的屬性。描述屬性值時，有兩種方式：一是像素描述；而是單位描述。
（1）像素描述：
格式如下：
1 background-position:向右偏移量 向下偏移量;
屬性值可以是正數，也可以是負數。比如：100px 200px、-50px -120px。
舉例如下：
（2）單詞描述
格式如下：
1 background-position: 描述左右的詞 描述上下的詞;
- 描述左右的詞：left、center、right
- 描述上下的詞：top 、center、bottom
比如說，right center表示將圖片放到右邊的中間；center center表示將圖片放到正中間。
background綜合屬性
background屬性和border一樣，是一個綜合屬性，可以將多個屬性寫在一起。(在盒子模型這篇文章中專門講到boder)
舉例1:
background:red url(1.jpg) no-repeat 100px 100px fixed;
等價於：
1 background-color:red; 2 background-image:url(1.jpg); 3 background-repeat:no-repeat; 4 background-position:100px 100px; 5 background-attachment:fixed;
以后，我們可以用小屬性層疊掉大屬性。
上面的屬性中，可以任意省略其中的一部分。
比如說，對於下面這樣的屬性：
1 background: blue url(images/wuyifan.jpg) no-repeat 100px 100px;
效果如下：
值得注意的一點是：background-color和background-image兩個屬性合起來一起寫時，需要按照順序才能生效，即color必須寫在前面，image必須寫在后面。
無論是
1 background：red； 2 background：url（）；
還是
1 background-color：red； 2 background-image：url（）；
color必須寫在前面才可以達到兩者並存的效果，有也只有這樣的順序才可以實現效果。
附圖：
2.position表示定位屬性，共三種定位屬性值，分別是絕對定位、相對定位、固定定位。
1 position: absolute; <!-- 絕對定位 --> 2 position: relative; <!-- 相對定位 --> 3 position: fixed; <!-- 固定定位 -->
（1）相對定位：讓元素相對於自己原來的位置，進行位置調整（可用於盒子的位置微調），相對定位不脫離標准流，別人不會把它的位置擠走，它的作用有兩個：1）主要微調元素；2）做絕對定位的參考，子絕父相(絕：絕對定位，相：相對定位)
格式如下：
1 position: relative; 2 left: 50px;/*橫坐標：正值表示向右偏移，負值表示向左偏移*/ 3 top: 50px;/*縱坐標：正值表示向下偏移，負值表示向上偏移*
相對定位的定位值
-
left：盒子右移
-
right：盒子左移
-
top：盒子下移
-
bottom：盒子上移
PS：負數表示相反的方向。
（2）絕對定位：定義橫縱坐標。原點在父容器的左上角或左下角。橫坐標用left表示，縱坐標用top或者bottom表示。絕對定位的盒子脫離了標准文檔流。所以，所有的標准文檔流的性質，絕對定位之后都不遵守了。絕對定位之后，標簽就不區分所謂的行內元素、塊級元素了，不需要display:block就可以設置寬、高了。格式如下：
1 position: absolute; /*絕對定位*/ 2 left: 10px; /*橫坐標*/ 3 top/bottom: 20px; /*縱坐標*/
絕對定位的參考點（重要）
（1）如果用top描述，那么參考點就是頁面的左上角，而不是瀏覽器的左上角：
（2）如果用bottom描述，那么參考點就是瀏覽器首屏窗口尺寸（好好理解“首屏”二字），對應的頁面的左下角：
（3）固定定位：就是相對瀏覽器窗口進行定位。無論頁面如何滾動，這個盒子顯示的位置不變
參考鏈接
https://www.cnblogs.com/qianguyihao/p/8277895.html