position的static、relative、absolute區別與聯絡

定位為relative的元素脫離正常的文字資料流中（脫離正常的文字資料流的意思就是有定位，有個參照對象，用top,bottom,left,right來定位），但其在文字資料流中的位置依然存在，而定位為absolute的層脫離正常文字資料流，但與relative的區別是其在正常流中的位置不在存在。

詳解CSS+DIV布局定位
在用CSS+DIV進行布局定位的時候，一直對position的四個屬性值relative,absolute,static,fixed分的不是很清楚，以致經常會出現讓人很鬱悶的結果。今天研究了一下，總算有所瞭解。在此總結一下：
先看下position各個屬性值的定義：
1、static：預設值。沒有定位，元素出現在正常的流中（忽略top,bottom,left,right或者z-index聲明）。
2、relative：產生相對定位的元素，通過top,bottom,left,right的設定相對於其正常位置進行定位。可通過z-index進行層次分級。
3、absolute：產生絕對位置的元素，相對於static定位以外的第一個父元素進行定位。元素的位置通過"left","top","right"以及"bottom"屬性進行規定。可通過z-index進行層次分級。

其中test2的css position為static，而absolute相對於static定位以外的第一個父元素進行定位，也就是position為relative的test1。

4、fixed：產生絕對位置的元素，相對於瀏覽器視窗進行定位。元素的位置通過"left","top","right"以及"bottom"屬性進行規定。可通過z-index進行層次分級。
static與fixed的定位方式較好理解，在此不做分析。下面對應用的較多的relative和absolute進行分析：

3、relative與absolute的主要區別：
首先，是上面已經提到過的在正常流中的位置存在與否。其次，relative定位的層總是相對於其最近的父元素，無論其父元素是何種定位方式。

圖中，紅色背景層為relative定位，其直接父元素綠色背景層為預設的static定位。紅色背景層的位置為相對綠色背景層top、left個20元素。而如果紅色背景層定位為absolute：

可以看到，紅色背景層依然定義top:20px；left:20px；但其相對的元素變為定位方式為absolute或relative的黃色背景層。因此，對於absolute定位的層總是相對於其最近的定義為absolute或relative的父層，而這個父層並不一定是其直接父層。如果其父層中都未定義absolute或relative，則其將相對body進行定位，如下圖

除top、left、right、bottom定位外，margin屬性值的定義也符合上述規則。