一，什麼是文件流

將窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素,即為文件流。

 只有三種情況會使得元素脫離文件流，分別是：浮動、絕對定位和相對定位。

二，定位分類

靜態定位（static）

html元素預設的定位方式，top, right, bottom, left 和 z-index 屬性無效

相對定位(relative) 

（1）相對定位相對的是它原本在文件流中的位置而進行的偏移

（2）它沒有脫離文件流，它還佔有文件空間，top/left/right/bottom屬性生效，而且佔據的文件空間不會隨 top / right / left / bottom 等屬性的偏移而發生變動，也就是說它後面的元素是依據原來的位置( top / left / right / bottom 等屬性生效之前)進行的定位。

（3）margin是佔據文件空間的

（4）position:relative 對 table-*-group, table-row, table-column, table-cell, table-caption 元素無效

 絕對定位(absoulte)

（1）脫離文件流

（2）根據祖先類元素(父類以上)進行定位，而這個祖先類還必須是以postion非static方式定位的

（3）使用absoulte或fixed定位的話，必須指定 left、right、 top、 bottom 屬性中的至少一個，否則left/right/top/bottom屬性會使用它們的預設值 auto ，這將導致物件遵從正常的HTML佈局規則，在前一個物件之後立即被呈遞，

（4）如果top和bottom一同存在的話，那麼只有top生效，如果left和right一同存在的話，那麼只有left生效

（5）祖先類的margin會讓子類的absoulte跟著偏移，而padding卻不會讓子類的absoulte發生偏移。總結一下，就是absoulte是根據祖先類的border進行的定位

（6）絕對(absolute)定位物件在可視區域之外會導致滾動條出現。而放置相對(relative)定位物件在可視區域之外，滾動條不會出現

（7）絕對定位的元素可以設定外邊距（margins），且不會與其他邊距合併

固定定位（fixed）

（1）脫離了文件流

（2）能夠根據top、right、left、bottom屬性進行定位

（3）fixed是根據視窗為原點進行偏移定位的，不會根據滾動條的滾動而進行偏移

（4）當元素祖先的 transform  屬性非 none 時，容器由視口改為該祖先。

三，例子