摘要：更多關于的信息可參考魔法堂不得不說的因此的實際值則是相對于而言，我們可以通過來獲取和的實際值。對于由于自身有固有的，因此當設置時，其實際值就是元素固有的。結果就是除均不為，而為時，會自動計算以滿足等式。兩條不滿足外，其他情況均一致。

當我們以position:absolute之名讓元素脫離Normal flow的控制后，以為通過left和top屬性值即可讓元素得以無限的自由時，卻發現還有各種神秘的力量左右著它的來去，于是我們意識到自己力量的微弱，開始迷茫不前。
后來有幸拾到各路前輩高人的秘笈，終于打通任督二脈，記錄在案以便日后查閱。

Q:不是說好以左上角為原點(0,0)嗎？怎么top:auto;right:auto;bottom:auto;left:auto;時的效果和Normal flow中的是一樣的？

  
position:static
  
position:absolute

A:那是因為Absolute positioning在初始化狀態時(top:auto;right:auto;bottom:auto;left:auto;)，瀏覽器會生成一個看不見的采用Normal flow定位的虛擬盒子(hypothetical box)，若虛擬盒子對應的盒子沒有設置top/right/bottom/left屬性值，則該盒子將與虛擬盒子重疊。
?因此當我們僅僅設置position:absolute時，呈現出來的效果是跟position:static是無區別的。那這時我們會有兩個疑問了，1. 既然top/right/bottom/left等默認值為auto，那實際計算值是多少呢？2. 假如顯示設置top/right/bottom/left為特定數值后，那效果又是如何的呢？
?若要回答上述問題，則先要理解定位參考系。一說起定位我們必須找到對應的參考系，如相對定位那樣望文生義就知道它對應著某個參考系，而絕對定位則隱晦得多，咋看之下會讓我們忽視參考系的重要性，然后糊里糊涂地理解和解讀它呈現的效果。
?絕對定位的參考系就是盒子所在的containing block，下面我們來深入一下吧！

?不管采用的是Normal flow、Floats還是Absolute positioning，總之定位的參考系就是一個名為containing block的四方盒子，但不同的position scheme會對應不同containing block。就Absolute positioning而言，首先會尋找最近的一個position:relative/fixed/absolute的父容器元素，若找到且父容器為block-level element則以父容器的的padding box作為containing block，若父容器為inline-level element則根據父容器的directionCSS屬性值決定containing block;若一個都找不到則會以initial containing block作為其的containing block。
更多關于containing block的信息可參考《CSS魔法堂：不得不說的Containing Block》
?因此top/right/bottom/left的實際值則是相對于containing block而言，我們可以通過el.offsetLeft/Top來獲取top和left的實際值。

也許大家都見過以下這種水平垂直居中方式

為啥簡單設置top/right/bottom/left:0;margin:auto就輕松搞定這么難搞的水平垂直居中呢？請看下圖

?當盒子采用絕對定位后，其top/right/bottom/left和box model以占滿整個containing block為目的，除非每個屬性均設置的特定數值導致整體寬度或高度均小于containing block的寬度或高度。也就是得到以下兩個等式：

垂直方向："top" + "margin-top" + "border-top-width" + "padding-top" + "height" + "padding-bottom" + "border-bottom-width" + "margin-bottom" + "bottom" = height of containing block

水平方向："left" + "margin-left" + "border-left-width" + "padding-left" + "width" + "padding-right" + "border-right-width" + "margin-right" + "right" = width of containing block
?然后一切玄機則蘊藏在auto這個屬性值上了。

其中垂直方向上top/margin-top/height/margin-bottom/bottom可以設置為auto，而水平方向上則是left/margin-left/width/margin-right/right可以設置為auto。

margin-top/bottom設置為auto時，實際值自動分配的情況

top/height/bottom均不為auto時，那么margin-top/bottom兩者的實際值相等，且足以滿足等式1。

margin-top/bottom設置為auto時，實際值為0的情況

top/height/bottom均為auto時，height的值由其子元素決定。top/bottom的值則根據虛擬盒子來決定，最終讓定位效果如同采用position:static一般，反正要讓等式1成立。

top/bottom均不為auto，而height為auto時，height會自動計算以滿足等式1。

其他情況height由子元素或自身屬性值決定，top/bottom由自身屬性值或以滿足等式1來決定實際值。

注意：top/auto/bottom默認值為auto，而margin-top/bottom默認值為0。

margin-left/right設置為auto時，實際值自動分配的情況

left/width/right均不為auto時，那么margin-left/right兩者的實際值相等，且足以滿足等式2。

margin-left/right設置為auto時，實際值為0的情況

left/width/right均為auto時，width的值由其子元素決定。left/right的值則根據direction的值來決定，最終讓定位效果如同采用position:static一般反，正要讓等式2成立。

left/right均不為auto，而width為auto時，width會自動計算以滿足等式2。

其他情況width由子元素或自身屬性值決定，left/right由自身屬性值或以滿足等式2來決定實際值。

注意：left/width/right默認值為auto，而margin-left/right默認值為0。

?由于replaced element自身有固有的width/height，因此當設置width:auto;height:auto時，其實際值就是元素固有的width/height。也就是width/height不存在為滿足等式2和1動態擴展/縮小實際值的情況。結果就是除"2. top/bottom均不為auto，而height為auto時，height會自動計算以滿足等式1。"和"2. left/right均不為auto，而width為auto時，width會自動計算以滿足等式2。"兩條不滿足外，其他情況均一致。

注意,IE5.5/6/7下會有以下例外：

left/margin-left/margin-right/right均不為auto而width為auto時，IE5.5下width的實際值將由子元素決定;

top/margin-top/margin-bottom/bottom均不為auto而height為auto時，IE5.5下height的實際值將由子元素決定;

left/width/right均不為auto，而margin-left/right為auto時，IE5.5/6/7下margin-left/right的實際值為0;

top/height/bottom均不為auto，而margin-top/bottom為auto時，IE5.5/6/7下margin-top/bottom的實際值為0.

?對于position:fixed其實也屬于Absolute positioning，但它參考系永遠是由Viewport所產生的containing block而已，其他均與上述內容一致。
注意：由Viewport所產生的containing block與initail containing block是不同的詳情請參考《CSS魔法堂：不得不說的Containing Block》

fsjohnhuang

注意：IE6不支持position:fixed

若有紕漏，望各位指正，謝謝！
尊重原創，轉載請注明來自：http://www.cnblogs.com/fsjohnhuang/p/535...肥子John

深入理解CSS絕對定位
10 Visual formatting model details
KB012: 絕對定位( Absolute positioning )
https://www.w3.org/TR/CSS21/visuren.html...