CSS+DIV定位分析(relative,absolute,static,fixed)

在用CSS+DIV進行佈局的時候，一直對position的四個屬性值relative,absolute,static,fixed分的不是很清楚，以至常常會出現讓人很鬱悶的結果。今天研究了一下，總算有所瞭解。在此總結一下：

一、官方定義

先看下各個屬性值的定義：

一、static：默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

二、relative：生成相對定位的元素，經過top,bottom,left,right的設置相對於其正常位置進行定位。可經過z-index進行層次分級。

三、absolute：生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。元素的位置經過 「left」, 「top」, 「right」 以及 「bottom」 屬性進行規定。可經過z-index進行層次分級。

四、fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置經過 「left」, 「top」, 「right」 以及 「bottom」 屬性進行規定。可經過z-index進行層次分級。

static與fixed的定位方式較好理解，在此不作分析。下面對應用的較多的relative和absolute進行分析：

二、實例講解

一、relative。定位爲relative的元素脫離正常的文本流中，但其在文本流中的位置依然存在。如圖1：

黃色背景的層定位爲relative，紅色邊框區域爲其在正常流中的位置。在經過top、left對其定位後，從灰色背景層的位置能夠看出其正常位置依然存在。

二、absolute。定位爲absolute的層脫離正常文本流，但與relative的區別是其在正常流中的位置不在存在。如圖2：

能夠看到，在將黃色背景層定位爲absolute後，灰色背景層自動補上。佔據了其位置，黃色背景漂離與文檔以外。

三、relative與absolute的主要區別：

首先，是上面已經提到過的在正常流中的位置存在與否。

其次，relative定位的層老是相對於自身原來的位置relative，在原來的位置上發生偏移。如圖3：

圖中，紅色背景層爲relative定位，其直接父元素綠色背景層爲默認的static定位。紅色背景層的位置爲相對自身的位置發生了偏離，分別爲top、left個20元素。而若是紅色背景層定位爲absolute，則情形如圖4：

能夠看到，紅色背景層依然定義top:20px；left:20px；但其相對的元素變爲定位方式爲absolute或relative的黃色背景層。所以，對於absolute定位的層老是相對於其最近的定義爲absolute或relative的父層，而這個父層並不必定是其直接父層。若是其父層中都未定義absolute或relative，則其將相對body進行定位，如圖5：

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

最後重複一下：relative 不脫離文檔流，absolute 脫離文檔流。也就是說：relative 的元素儘管表面上看到它偏離了原來的位置（相對自身），但它實際上在文檔流中仍是沒變。absolute的元素不只位置改變了，同時也脫離了文檔流。