background-position和position

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）固定定位：就是相對瀏覽器窗口進行定位。不管頁面如何滾動，這個盒子顯示的位置不變

 

參考連接

http://www.javashuo.com/article/p-tgbagjss-g.html

http://www.javashuo.com/article/p-svuduzhw-g.html

http://www.javashuo.com/article/p-zwmfvirc-v.html