IT工程師數位筆記本

一、Position各屬性值詳解　　　　　　　　　　　　　　　　　　　　

  1.  static ：默認值，元素將按照正常文檔流規則排列。

  2.  relative ：相對定位，元素仍然處于正常文檔流當中，但可以通過left、top、right和bottom的CSS規則來改變元素的位置。

       注意點：[a]. 元素原來位置將保留，不被其他元素所占據;

                     [b]. 當使用left，top改變元素位置時，元素將以原來位置的border外邊框的左上角作為參考點 ;

                     [c]. 當使用right、top時改變元素位置時，元素將以原來位置的border外邊框的右上角作為參考點 ;

                     [d]. 當使用left、bottom時改變元素位置時，元素將以原來位置的border外邊框的左下角作為參考點 ;

                     [e]. 當使用right、bottom時改變元素位置時，元素將以原來位置的border外邊框的右下角作為參考點 ;

  3.  absolute ：絕對定位，元素脫離正常文檔流，可通過left、top、right和bottom的CSS規則來改變元素的位置

　　  注意點：[a]. 元素將不再占據原有位置;

                     此處定義 變量X，以下內容將使用X代替參考點

　　　　　　條件：當元素的offsetParent為body而且body沒有進行CSS定位，則X=頁面;

                               其他情況，X=offsetParent的padding外邊框。

                     [b]. 當使用left，top改變元素位置時，元素將以X的左上角或作為參考點 ;

                     [c]. 當使用right、top時改變元素位置時，元素將以X的右上角作為參考點 ;

                     [d]. 當使用left、bottom時改變元素位置時，元素將以X的左下角作為參考點 ;

                     [e]. 當使用right、bottom時改變元素位置時，元素將以X的右下角作為參考點 ;

  4.  fixed ：固定定位，元素脫離正常文檔流，可通過left、top、right和bottom的CSS規則來改變元素的位置

         注意點：[a]. 元素將不再占據原有位置;

　　　　　　  [b]. 以瀏覽器的可視區域的四角作為參考點。

                       [c]. IE5.5~6不支持該屬性值。

                       可使用js來修復，對于拖動滾動條元素閃鑠的bug需要通過下列的CSS來處理。

* html{
     background-image:url(about:blank);
     background-attachment:fixed;
}

或

body{
     _background-image:url(about:blank);
     _background-attachment:fixed;
}

二、 何謂文檔流　　　　　　　　　　　　　　　　　　　　　　　　       

  將窗體自上而下分成一行行，并在每一行中按從左到右的順序排放元素，即為文檔流。
  有三種情況將使得元素脫離文檔流，分別是浮動(float left or right)、絕對定位(position:absolute)、固定定位(position:fixed)。

三、何謂CSS定位　　　　　　　　　　　　　　　　　　　　　　　　　 

  CSS定位，就是元素的position不為static。而該元素將成為其親子元素的offsetParent，也有機會成為其孫元素的offsetParent。

四、總結　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

  CSS定位貌似簡單，但又容易忽視細節部分，本文盡量記錄研究所得，希望大家一起來將其充實。

  尊重原創，轉載請注明來自：http://www.cnblogs.com/fsjohnhuang/p/3967350.html ^_^肥仔John

五、參考　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

http://www.cnblogs.com/StormSpirit/archive/2012/10/15/2715316.html