relative（相對的）
可用 left 與 top 設定位置。以父元素的原點為起點，不過讓人很難理解的是，它先照 static 的規則，將元素排在前一個元素後面，才來就定位置：
position:relative;
left:15px;
top:15px;
position:relative;
left:15px;
top:15px;
position:relative;
left:15px;
top:15px;
position:relative;
left:30px;
top:30px;
第一個線框中，紅、黃兩者都是 (15,15)，但後面的黃色區塊被前面的紅色區塊給擠了下來。
第二個線框，黃色區塊改為 (30,30)，如果扣除紅色區塊的話，黃色區塊確實是 (30,30) 沒錯，只是被紅色區塊給卡了下來。
absolute（絕對的）
可用 left 與 top 設定位置，起點為父元素的原點，而且這次沒有後一個元素要被前一個元素卡下來的問題。
例如，紅色區塊是 (15,15)，黃色區塊是 (30,30) 的話，顯示結果如下：
position:absolute;
left:15px;
top:15px;
position:absolute;
left:30px;
top:30px;
兩者都是 (15,15) 的話，表示位置相同，因此疊在一起：
position:absolute;
left:15px;
top:15px;
position:absolute;
left:15px;
top:15px;
由於 absolute 好理解多了，所以請再跟 relative 比較看看，absolute 要與 relative 結果一致的話，left 與 top 分別是：
position:absolute;
left:15px;
top:15px;
position:absolute;
left:15px;
top:95px;
position:absolute;
left:15px;
top:15px;
position:absolute;
left:30px;
top:110px;
藉由 absolute 這直覺的 (left,top) 位置設定，了解到 relative 那詭異的位置排列模式，原來只是被前一個元素給卡了下來而已；如果扣除前一個元素的話，確實是照所指定的 (left,top) 距離就定位置。