一、定位屬性
定位屬性position的屬性值有：static/relative/absolute/fixed，其默認值爲static。我感覺，關於這些定位，需要考慮兩個問題：第一個，定位是否破壞了常規文檔流；第二個，定位的參考系是誰。下面從這兩個角度分析一下靜態、相對、絕對和固定定位。
1. 靜態定位
- 靜態定位
static是position屬性的默認值，正常情況下采用的都是靜態定位。因此常規的文檔流正是在static下形成的，所以靜態定位更不會破壞常規文檔流； - 靜態定位下，就是標準文檔流佈局，塊級元素就是從上而下堆疊起來的，即使對塊級元素設置了邊偏移如
top:50px; left:100px;的設置也不起作用。也就是說，邊偏移只有在非靜態定位的情況下才會起作用。
2. 相對定位
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p id="specialpara">Third Paragraph (with ID)</p>
<p>Fourth Paragraph</p>
p#specialpara {position:relative; top:25px; left:30px;}
- 相對定位
relative不破壞標準文檔流，使用相對定位的元素，原位置仍然保留，空置，其他元素不能佔用 - 偏移是參照自已原來的位置進行的
3. 絕對定位
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p id="specialpara">Third Paragraph (with ID)</p>
<p>Fourth Paragraph</p>
p#specialpara {position:absolute; top:25px; left:30px;}
- 絕對定位
absolute破壞標準文檔流，使用絕對定位的元素脫離標準文檔流，即原來的空間不再保留，脫離後下一個盒子自動補位 - 偏移是參照距自己最近的已定位的父級元素進行的；如果使用絕對定位的子元素的所有父元素都沒有進行定位，那麼偏移是參照
<body>進行的，也就是參照瀏覽器左上角 - 子絕父相規則：當子級元素是絕對定位時，其父級元素應該是相對定位；其實，當子級元素是絕對定位時，父級元素只要是定過位，無論是relative、absolute還是fixed都OK；但是，在網頁佈局中我們多使用“子絕父相”定位；這是因爲，子元素絕對定位是爲了不佔位置實現塊的完全重疊；父元素相對定位是爲了佔位置，不影響其他盒子的分佈
4. 固定定位
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p id="specialpara">Third Paragraph (with ID)</p>
<p>Fourth Paragraph</p>
p#specialpara {position:fixed; top:30px; left:20px;}
- 固定定位
fixed破壞標準文檔流結構，使用固定定位的元素脫離標準文檔流，脫離後下一個盒子自動補位，這一點和絕對定位absolute相同 - 和絕對定位不同的是，固定定位
fixed和絕對定位absolute定位參照不一樣。固定定位的參照是瀏覽器視窗的左上頂點，也就是說，當滑動瀏覽器右邊的側滑輪時，固定定位的元素會保持相對於視窗左上頂點的位置不發生變化 - 固定定位並不常用，最常見的情況是用它創建不隨頁面滾動而移動的導航元素
二、背景
盒模型背景的前景層和背景層
1. 背景顏色
前景色color，背景色background-color；前景色即影響文本也影響邊框，當然是在沒有對border-color進行單獨設置的情況下
2. 背景圖片
background-image，默認情況下背景圖片會以元素左上角爲起點，沿水平和垂直方向重複出現，最終填滿整個背景區域
p {
font-size:28px;
font-family:helvetica, arial, sans-serif;
width:345px;
height:110px;
margin:20px auto;
padding:10px;
color:#000;
border:4px solid #aaa;
background-color:#fff;
background-image:url(圖片路徑/圖片文件名);}
需要注意的是指定背景圖片來源的方式：background-image:url(圖片路徑/圖片文件名)
3. 背景重複
background-repeat有四個屬性值，分別是repeat、repeat-x、repeat-x和no-repeat，它們的效果如下：
4. 背景位置
background-position有5個屬性值，分別是top、left、bottom、right和center
5. 背景尺寸
background-size，這是css3提供的一個新屬性
6. 背景粘附
background-attachment該屬性控制滾動元素內的背景圖片是否隨元素滾動而移動，默認值時 scroll即背景圖片隨元素移動，而fixed則相反。
7. 多背景圖片
8. 背景漸變
Reference：
- 《css設計指南(第三版)》