CSS魔法堂：Absolute Positioning就這個樣 - fsjohnhuang－IT工程師數位筆記本

文章出處

前言

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

以Normal flow為基礎

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

<style type="text/css">
  #parent{
    background: blue;
  }
  #sibling{
    text-align: center;
    line-height: 100px;
    margin: 0 20px;
    height: 100px;
    background: red;
  }
  #protagonist{
    text-align: center;
    line-height: 100px;
    width: 200px;
    height: 100px;
    background: yellow;
    position: absolute;
  }
</style>
<div id="parent">
  <div id="sibling">position:static</div>
  <div id="protagonist">position:absolute</div>
</div>

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，下面我們來深入一下吧！

定位參考系——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+box model

也許大家都見過以下這種水平垂直居中方式（IE7/6/5.5下均無效）

    <style type="text/css">
      #parent{
        background: blue;
        width: 200px;
        height: 200px;
        position: relative;
      }
      #protagonist{
        background: yellow;
        width: 100px;
        height: 100px;
    
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    margin: auto;
      }
    </style>
    <div id="parent">
      <div id="protagonist"></div>
    </div>

為啥簡單設置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。

對于non-replaced element的垂直方向等式

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。

對于non-replaced element的水平方向等式

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

由于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.

Fixed positioning——Absolute positioning的子類

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

<style type="text/css">
  body{
    background: blue;
  }
  #protagonist{
    background: yellow;
    width: 100px;
    height: 100px;

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
   }
</style>
<div id="protagonist">fsjohnhuang</div>

注意：IE6不支持position:fixed