摘要：更多關(guān)于的信息可參考魔法堂不得不說(shuō)的因此的實(shí)際值則是相對(duì)于而言，我們可以通過(guò)來(lái)獲取和的實(shí)際值。對(duì)于由于自身有固有的，因此當(dāng)設(shè)置時(shí)，其實(shí)際值就是元素固有的。結(jié)果就是除均不為，而為時(shí)，會(huì)自動(dòng)計(jì)算以滿足等式。兩條不滿足外，其他情況均一致。

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

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

  
position:static
  
position:absolute

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

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

也許大家都見(jiàn)過(guò)以下這種水平垂直居中方式

為啥簡(jiǎn)單設(shè)置top/right/bottom/left:0;margin:auto就輕松搞定這么難搞的水平垂直居中呢？請(qǐng)看下圖

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

垂直方向："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
?然后一切玄機(jī)則蘊(yùn)藏在auto這個(gè)屬性值上了。

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

margin-top/bottom設(shè)置為auto時(shí)，實(shí)際值自動(dòng)分配的情況

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

margin-top/bottom設(shè)置為auto時(shí)，實(shí)際值為0的情況

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

top/bottom均不為auto，而height為auto時(shí)，height會(huì)自動(dòng)計(jì)算以滿足等式1。

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

注意：top/auto/bottom默認(rèn)值為auto，而margin-top/bottom默認(rèn)值為0。

margin-left/right設(shè)置為auto時(shí)，實(shí)際值自動(dòng)分配的情況

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

margin-left/right設(shè)置為auto時(shí)，實(shí)際值為0的情況

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

left/right均不為auto，而width為auto時(shí)，width會(huì)自動(dòng)計(jì)算以滿足等式2。

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

注意：left/width/right默認(rèn)值為auto，而margin-left/right默認(rèn)值為0。

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

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

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

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

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

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

?對(duì)于position:fixed其實(shí)也屬于Absolute positioning，但它參考系永遠(yuǎn)是由Viewport所產(chǎn)生的containing block而已，其他均與上述內(nèi)容一致。
注意：由Viewport所產(chǎn)生的containing block與initail containing block是不同的詳情請(qǐng)參考《CSS魔法堂：不得不說(shuō)的Containing Block》

fsjohnhuang

注意：IE6不支持position:fixed

若有紕漏，望各位指正，謝謝！
尊重原創(chuàng)，轉(zhuǎn)載請(qǐng)注明來(lái)自：http://www.cnblogs.com/fsjohnhuang/p/535...肥子John

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