絕對定位（Absolute positioning）
相對包含塊偏移定位
在絕對定位模型中，一個框明確地基於它的包含塊偏移。不是父元素，這點需注意。
要是人家問你，絕對定位相對於誰定位啊？你很快樂的說：它的父元素。那就顯得矬了- -!
專業的說法，相對於包含快定位。所以，絕對定位元素的定位，關鍵是包含塊，什麼是包含塊？見：【分享】說說標準——CSS核心可視化格式模型(visual formatting model)之一：包含塊(containing block)
完全脫離常規流
它完全脫離了常規流（對後繼的兄弟節點沒有影響）。
這一點又與浮動元素不同，好歹浮動元素會對後繼的行框產生影響，而且，後面聲明的絕對定位元素也不會受前面定義的絕對元素的影響。
可以這麼理解，常規流中的元素，都在同一個層上，浮動是處於常規流之上的一個特殊層，可能會對常規流中的元素有影響。但是絕對定位的元素不會，可以把每個絕對定位的框看做一個單獨的圖層，獨來獨往。所以，說它完全脫離了常規流也不無道理。
注意一點，絕對元素定位的 top 和 left 值跟絕對元素未脫離常規流之前在常規流中位置有關。
看這個例子：
- HTML code
-
<div style="position:absolute; width:100px; height:100px; background-color:red;"> absolute </div> <div style="height:50px; border:1px solid blue; width:200px;">DIV 中的普通文本元素</div> <div style="position:absolute; left:60px; width:100px; height:100px; background-color:green;"> absolute </div>
中間的DIV在常規流中，影響了後面的絕對定位元素的位置，但是沒有受到前面的絕對定位元素的影響。
實際截圖：
絕對定位元素生成的包含塊
一個絕對定位框會爲它的常規流子元素和定位派生元素(不包含 fiexed 定位的元素)生成一個新的包含塊。不過，絕對定位元素的內容不會在其它框的周圍排列。
至於，爲何只爲常規流中的子元素還有絕對定位元素生成包含塊，就不大瞭解了……有知道的麼？分享一下……
注意，絕對定位框還會創建 block formatting contexts。在IE中則會觸發 hasLayout 。
堆疊層次
它們可能會掩蓋另一個框的內容，或者被另外一個框掩蓋，這取決於互相重合的框的堆疊層次。 也就是我們前面說的三維的可視化模型，除了X軸，Y軸，還有Z軸。
固定定位（Fixed positioning）
固定定位是絕對定位的一個子類。唯一的區別是，對於固定定位框，它的包含塊由可是窗口(viewport)創建。對於連續媒介，固定定位框並不隨着文檔的滾動而移動。從這個意義上說，它們類似於固定的背景圖形。對於頁面媒介，固定定位框在每頁裏重複。對於需要在每一頁底部放置一個簽名時，這個方法非常有用。
注意，在IE6裏不支持 Fixed 定位，通常的做法是使用絕對定位，然後用JS控制絕對定位框的位置，來代替固定定位。
W3C官方給出一個使用固定定位佈局的例子，爲了看起來明顯，我給所有的div加了個紅色的邊框，各位可以自行測試：
- HTML code
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>A frame document with CSS2</TITLE> <STYLE type="text/css"> BODY { height: 8.5in } div { border: 1px solid red; } /* Required for percentage heights below */ #header { position: fixed; width: 100%; height: 15%; top: 0; right: 0; bottom: auto; left: 0; } #sidebar { position: fixed; width: 10em; height: auto; top: 15%; right: auto; bottom: 100px; left: 0; } #main { position: fixed; width: auto; height: auto; top: 15%; right: 0; bottom: 100px; left: 10em; } #footer { position: fixed; width: 100%; height: 100px; top: auto; right: 0; bottom: 0; left: 0; } </STYLE> </HEAD> <BODY> <DIV id="header"> ...</DIV> <DIV id="sidebar"> ...</DIV> <DIV id="main"> ...</DIV> <DIV id="footer"> ...</DIV> </BODY> </HTML>
效果應該是(來自W3C)：
可視化格式模型概述：
http://topic.csdn.net/u/20100719/17/ff203b89-135e-46cf-8fce-705f16e37beb.html?006156676166584196
更多說說標準系列：
原文地址：
http://topic.csdn.net/u/20100826/16/7e8906c3-100c-4c7c-8c40-43c60555c68c.html?51135