什麼是文件流？
將窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素,即為文件流。
只有三種情況會使得元素脫離文件流，分別是：浮動、絕對定位和相對定位。
靜態定位(static) ：
static，無特殊定位，它是html元素預設的定位方式，即我們不設定元素的position屬性時預設的position值就是static，它遵循正常的文件流物件，物件占用文件空間，該定位方式下，top、right、bottom、left、z-index等屬性是無效的。
相對定位(relative) ：
relative定位，又稱為相對定位，從字面上來解析，我們就可以看出該屬性的主要特性：相對。但是它相對的又是相對於什麼地方而言的呢？這個是個重點，也是最讓我迷糊的乙個地方，現在讓我們來做個測試，我想大家都會明白的：
(1) 初始未定位
複製**
**如下:
/******初始*********/
first
second
初始原圖：
(2) 我們修改first元素的position屬性：
複製**
**如下:
偏移20px後：
– >> 虛線是初始的位置空間
現在看明白了吧，相對定位相對的是它原本在文件流中的位置而進行的偏移，而我們也知道relative定位也是遵循正常的文件流，它沒有脫離文件流，但是它的top/left/right/bottom屬性是生效的，可以說它是static到absoult的乙個中間過渡屬性，最重要的是它還占有文件空間，而且佔據的文件空間不會隨 top / right / left / bottom 等屬性的偏移而發生變動，也就是說它後面的元素是依據虛線位置( top / left / right / bottom 等屬性生效之前)進行的定位，這點一定要理解。
那好，我們知道了top / right / left / bottom 屬性是不會對relative定位的元素所佔據的文件空間產生偏移，那麼margin / padding會讓該文件空間產生偏移嗎？答案是肯定的，我們一起來做個試驗吧：
(3) 新增margin屬性：
複製**
**如下:
設定margin：20px後：
對比一下，是不是就很清晰了，我們先將first元素外邊距設為20px，那麼second元素就得向下偏移40px，所以margin是佔據文件空間！同理，大家可以自己動手測下padding的效果吧！
絕對定位(absoulte) ：
absoulte定位，也稱為絕對定位，雖然它的名字號曰「絕對」，但是它的功能卻更接近於」相對」一詞，為什麼這麼講呢？原來，使用absoult定位的元素脫離文件流後，就只能根據祖先類元素(父類以上)進行定位，而這個祖先類還必須是以postion非static方式定位的， 舉個例子，a元素使用absoulte定位，它會從父類開始找起，尋找以position非static方式定位的祖先類元素(注意，一定要是直系祖先才算哦~），直到標籤為止，這裡還需要注意的是，relative和static方式在最外層時是以標籤為定位原點的，而absoulte方式在無父級是position非static定位時是以作為原點定位。和元素相差9px左右。我們來看下效果：
(4) 新增absoulte屬性：
複製**
**如下:
relative
absoult
效果圖：
哈哈，看了上面的**後，細心的朋友肯定要問了，為什麼absoulte定位要加 top:0; left:0; 屬性，這不是多此一舉呢？
其實加上這兩個屬性是完全必要的，因為我們如果使用absoulte或fixed定位的話，必須指定 left、right、 top、 bottom 屬性中的至少乙個，否則left/right/top/bottom屬性會使用它們的預設值 auto ，這將導致物件遵從正常的html布局規則，在前乙個物件之後立即被呈遞，簡單講就是都變成relative，會占用文件空間，這點非常重要，很多人使用absolute定位後發現沒有脫離文件流就是這個原因，這裡要特別注意~~~
少了left/right/top/bottom屬性不行，那如果我們多設了呢？例如，我們同時設定了top和bottom的屬性值，那元素又該往哪偏移好呢？記住下面的規則：
既然absoulte是根據祖先類中的position非static元素進行定位的，那麼祖先類中的margin/padding會不會對position產生影響呢？看個例子先：
(5) 在absoulte定位中新增margin / padding屬性：
複製**
**如下:
#first
#second
first
second
效果圖：
看懂了，祖先類的margin會讓子類的absoulte跟著偏移，而padding卻不會讓子類的absoulte發生偏移。總結一下，就是absoulte是根據祖先類的border進行的定位。
note :絕對(absolute)定位物件在可視區域之外會導致滾動條出現。而放置相對(relative)定位物件在可視區域之外，滾動條不會出現。
關於css中的position
對於position的幾個屬性 static 無特殊定位，物件遵循html定位規則 absolute 將物件從文件流中拖出，使用left，right，top，bottom等屬性進行絕對定位。而其層疊通過z index屬性定義。此時物件不具有邊距，但仍有補白和邊框 relative 物件不可層疊，但將...
css中的定位（position）
w3c中對position各個 屬性值定義 static 元素框正常生成。塊級元素生成乙個矩形框，作為文件流的一部分，行內元素則會建立乙個或多個行框，置於其父元素中。relative 元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。absolute 元素框從文件流完全刪除，並...
CSS中position的使用
position 屬性值 值 描述absolute 生成絕對定位的元素，相對於 static 定位以外的第乙個父元素進行定位。元素的位置通過 left top right 以及 bottom 屬性進行規定。fixed 生成絕對定位的元素，相對於瀏覽器視窗進行定位。元素的位置通過 left top r...