我們今天來探討一下不同的 css 布局特性，包括：position:static, position:relative, position:absolute, 等等。
1 . position:static：
網頁各個單元的默認位置，這意味著該單元的位置通常不發生變化。在一般情況下，你不需要特別對它進行設定，除非你需要指定先前已經確定的另一個位置。
1 2 3 | #div-1 { position:static; } |
效果：
2 . position:relative
如果你設定了 position:relative ，你就可以使用 top 、bottom 、left 或 right 來設定版面中各個元素相對其原來位置做出改變。
下面我將 div-1 向下移動 20 pixels ，再向左移動 40 pixels。
1 2 3 | #div-1 { position:static; } |
效果：
可以注意到 div-1 已被改變位置，我們沒有移動 div-after ，導致 div-after 被 div-1 所遮擋。
3 . position:absolute
如果你對某個單元設定了 position:absolute ，你就能將這個元素放置到你想要它出現的任何地方。
下面讓我們把 div-1a 移到右上角。
1 2 3 4 5 6 | #div-1a { position:absolute; top:0; right:0; width:200px; } |
效果：
大家可以注意到 div-1a 已被單獨移到右上角了，div-1b, div-1c, 還有 div-after 隨著 div-1a 的移動自動上移。
4 . position:relative + position:absolute
如果我們設定 div-1 relative ，這時如果我們再設置 div-1a absolute ，我們就可以把 div-1a 移動到 div-1 的右上角。
1 2 3 4 5 6 7 8 9 | #div-1 { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; } |
效果：
5 . two column absolute
利用 relative/absolute 定位，我們能制作一個兩欄布局。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | #div-1 { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; } |
效果：
6 . two column absolute height
我們可以設立一個固定高度的兩欄布局。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | #div-1 { position:relative; height:250px; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; } |
效果：
但是這個方案的應用不多，因為我們不可能提前知道要加入的內容有多少，改變字體也會有所影響。
7 . float
我們可以向右或左”浮動”的一個元素，并讓文字圍繞它。這個應用一般用于圖像。
1 2 3 4 | #div-1a { float:left; width:200px; } |
效果：
8 . float columns
如果”浮動”的一個元素到左邊，”浮動”的另一個元素到右邊，那結果會是：
1 2 3 4 5 6 7 8 | #div-1a { float:left; width:150px; } #div-1b { float:left; width:150px; } |
效果：
9 . float columns with clear
我們還能利用 “clear” 命令來達到比較好的效果。
1 2 3 4 5 6 7 8 9 10 11 | #div-1a { float:left; width:190px; } #div-1b { float:left; width:190px; } #div-1c { clear:both; } |
效果：
10 . Disclaimer & Resources
這些例子都非常簡單，而且在 Windows IE 瀏覽器不會出現 css 錯誤。
其它一些好的資源：
Relatively Absolute
CSS 教材：18 步改變你網站的 css ，使你從初學者成為高級用戶
原文地址：barelyfitz.com
翻譯：peterzsk