css中的定位（position）

w3c中對position各個屬性值定義：

static

元素框正常生成。塊級元素生成乙個矩形框，作為文件流的一部分，行內元素則會建立乙個或多個行框，置於其父元素中。

relative

元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。

absolute

元素框從文件流完全刪除，並相對於其包含塊定位。包含塊可能是文件中的另乙個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉，就好像元素原來不存在一樣。元素定位後生成乙個塊級框，而不論原來它在正常流中生成何種型別的框。

fixed

元素框的表現類似於將 position 設定為 absolute，不過其包含塊是視窗本身。

我自己的理解

absolute，fixed，relative三個定位屬性的區別：

1.參考位置不同。

(1).relative的參考位置是它自己本來所應該在的位置，即不加定位時所處的位置。

(2).absolute的參考位置是它的父元素，但這個父元素必須設定了position屬性。如果它的直接父級沒有設定定位屬性，就一層一層的往上找，直到找到乙個設定了position定位屬性的父元素。若還是找不到，就把body作為它的定位參照物，進行定位。

(3).fixed的參考位置則是瀏覽器的視窗。

2.是否脫離文件流

什麼叫做脫離文件流呢？脫離文件流就是說元素本身失去了寬和高，也就是說它自己其實在那個位置，但是它之後的其他元素卻看不見它。直接佔據了它的位置，於是它就直接被無視了。

當position屬性被設定成relative時不會脫離文件流，但其實儲存的是那個定位之前的位置。設定absolute和fixed時就會脫離文件流。所以呢，我們有時候要給乙個元素設position為absolute時，就會把父級的position屬性設定為relative。