Position屬性四個值：static、fixed、absolute和relative的區別和用法

　　在用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的元素脫離正常的文本流中，但其在文本流中的位置依然存在。

　　　　他是默認參照父級的原始點爲原始點，無父級則以文本流的順序在上一個元素的底部爲原始點，配合TRBL進行定位，當父級內有padding等CSS屬性時，當前級的原始點則參照父級內容區的原始點進行定位，有如下屬性：

　　1)若是沒有TRBL，以父級的左上角，在沒有父級的時候，他是參照瀏覽器左上角(到這裏和absolute第一條同樣)，若是在沒有父級元素的狀況下，存在文本，則以文本的底部爲原始點進行定位並將文字斷開(和absolut不一樣)。

　　2)若是設定TRBL，而且父級沒有設定position屬性，仍舊以父級的左上角爲原點進行定位(和absolut不一樣)。

　　3)若是設定TRBL，而且父級設定position屬性(不管是absolute仍是relative)，則以父級的左上角爲原點進行定位，位置 由TRBL決定(前半段和absolute同樣)。若是父級有Padding屬性，那麼就之內容區域的左上角爲原點，進行定位(後半段和absolut不 同)。

　　以上三點能夠總結出，不管父級存在不存在，不管有沒有TRBL，均是以父級的左上角進行定位，可是父級的Padding屬性會對其影響。
　　綜合上面對relative的敘述，咱們就能夠將position屬性爲relative的DIV視成能夠用TRBL進行定位的的普通DIV，或者說 只要將咱們平時佈局頁面的div的CSS屬性中加上position:relative後，就不僅是用float佈局頁面了，還能夠用TRBL進行佈局頁 面 了，或者說加上position:relative的DIV也能夠像普通的DIV進行佈局頁面了，只不過還能夠用TRBL進行佈局頁面。可是 position屬性爲absolute不能夠用來佈局頁面，由於若是用來佈局的話，全部的DIV都相對於瀏覽器的左上角定位了，因此只能用於將某個元素 定位於屬性爲absolute的元素的內部某個位置。

　　　　Top的值表示對象相對原位置向下偏移的距離，bottom的值表示對象相對原位置向上偏移的距離，二者同時存在時，只有Top起做用。

　　　　left的值表示對象相對原位置向右偏移的距離，right的值表示對象相對原位置向左偏移的距離，二者同時存在時，只有left起做用。

　　　　如圖1：

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

 

二、absolute

　　　　定位爲absolute的層脫離正常文本流，但與relative的區別是其在正常流中的位置再也不存在。

這個屬性老是有人給出誤導。說當position屬性設爲absolute後，老是按照瀏覽器窗口來進行定位的，這實際上是錯誤的。實際上，這是fixed屬性的特色。

　　1)若是沒有TRBL(top、right、bottom、left)，以父級的左上角，在沒有父級的時候，他是參照瀏覽器左上角,若是在沒有父級元素的狀況下，存在文本，則以它前面的最後一個文字的右上角爲原點進行定位可是不斷開文字，覆蓋於上方。
　　2)若是設定TRBL，而且父級沒有設定position屬性，那麼當前的absolute則以瀏覽器左上角爲原始點進行定位，位置將由TRBL決定。
　　3)若是設定TRBL，而且父級設定position屬性(不管是absolute仍是relative)，則以父級的左上角爲原點進行定位，位置由 TRBL決定。即便父級有Padding屬性，對其也不起做用，說簡單點就是：它只堅持一點，就以父級左上角爲原點進行定位，父級的padding對其根 本沒有影響。

以上三點能夠總結出，若想把一個定位屬性爲absolute的元素定位於其父級元素內，只有知足兩個條件：

　 第一：設定TRBL

 　第二：父級設定Position屬性

　　上面的這個總結很是重要，能夠保證你在用absolue佈局頁面的時候，不會錯位，而且隨着瀏覽器的大小或者顯示器分辨率的大小，而不發生改變。

　　只要有一點不知足，元素就會以瀏覽器左上角爲原點，這就是初學者容易犯錯的一點，已經定位好的板塊，當瀏覽器的大小改變，父級元素會隨之改變，可是設 定Position屬性爲absolute的板塊和父級元素的位置發生改變，錯位了，這就是由於此時元素以瀏覽器的右上角爲原點的緣由。
　　初學者很容易犯錯的是，不清楚Position屬性爲absolute的板塊，若想定位到父級板塊中，而且當瀏覽器的大小改變或顯示器的分辨率改變，佈局不發生改變，是須要知足兩個條件的，只要有一點不知足，元素就會以瀏覽器左上角爲原點，從而致使頁面佈局錯位。

　　　　Top的值表示對象上邊框與瀏覽器窗口頂部的距離，bottom的值表示對象下邊框與瀏覽器窗口底部的距離，二者同時存在時，只有Top起做用；若是二者都未指定，則其頂端將與原文檔流位置一致，即垂直保持位置不變。

　　　　left的值表示對象左邊框與瀏覽器窗口左邊的距離，right的值表示對象右邊框與瀏覽器窗口右邊的距離，二者同時存在時，只有left起做用；若是二者都未指定，則其左邊將與原文檔流位置一致，即水平保持位置不變。 

　　　　在Position屬性值爲absolute的同時，若是有一級父對象（不管是父對象仍是祖父對象，或者再高的輩分，同樣）的Position屬性值爲Relative時，則上述的相對瀏覽器窗口定位將會變成相對父對象定位，這對精肯定位是頗有幫助的。

三、relative與absolute的主要區別

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

其次，relative定位的層老是相對於其最近的父元素，不管其父元素是何種定位方式。如圖3：

圖中，紅色背景層爲relative定位，其直接父元素綠色背景層爲默認的static定位。紅色背景層的位置爲相對綠色背景層top、left個20元素。而若是紅色背景層定位爲absolute，則情形以下：

 

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

 

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

總結：

　　屬性爲relative的元素能夠用來佈局頁面，屬性爲absolute的元素用來定位某元素在父級中的位置，既然屬性爲absolute的元素用來定位某元素在父級中位置，就少不了TRBL，這時候根據一開始講的absolute的第三條，若是父級元素沒有position屬性那麼 absolute元素就會脫離父級元素，可是若是是佈局頁面，父級元素position的屬性又不能爲absolute，否則就會以瀏覽器左上角爲原點 了，因此父級元素的position屬性只能爲relative！

　　若是用position來佈局頁面，父級元素的position屬性必須爲relative，而定位於父級內部某個位置的元素，最好用 absolute，由於它不受父級元素的padding的屬性影響，固然你也能夠用position，不過到時候計算的時候不要忘記padding的值

Note : 絕對(absolute)定位對象在可視區域以外會致使滾動條出現。而放置相對(relative)定位對象在可視區域以外，滾動條不會出現。

什麼是文檔流？

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

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

z-index屬性

       z-index，又稱爲對象的層疊順序，它用一個整數來定義堆疊的層次，整數值越大，則被層疊在越上面，固然這是指同級元素間的堆疊，若是兩個對象的此屬 性具備一樣的值，那麼將依據它們在HTML文檔中流的順序層疊，寫在後面的將會覆蓋前面的。須要注意的是，父子關係是沒法用z-index來設定上下關係 的，必定是子級在上父級在下。

Note：使用static 定位或無position定位的元素z-index屬性是無效的。