靜下心來慢慢讀，讀完一定會有所收穫的

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進行層次分級。

relative

定位為relative的元素脫離正常的文字流中，但其在文字流中的位置依然存在。

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

• 如果沒有TRBL

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

• 如果設定TRBL，並且父級沒有設定position屬性，仍舊以父級的左上角為原點進行定位(和absolut不同)。

• 如果設定TRBL，並且父級設定position屬性(無論是absolute還是relative)，則以父級的左上角為原點進行定位，位置 由TRBL決定(前半段和absolute一樣)。如果父級有Padding屬性，那麼就以內容區域的左上角為原點，進行定位(後半段和absolut不 同)。

以上三點可以總結出，無論父級存在不存在，無論有沒有TRBL，均是以父級的左上角進行定位，但是父級的Padding屬性會對其影響。

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

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

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

absolute

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

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

• 如果沒有TRBL(top、right、bottom、left)，以父級的左上角，在沒有父級的時候，他是參照瀏覽器左上角,如果在沒有父級元素的情況下，存在文字，則以它前面的最後一個文字的右上角為原點進行定位但是不斷開文字，覆蓋於上方。

• 如果設定TRBL，並且父級沒有設定position屬性，那麼當前的absolute則以瀏覽器左上角為原始點進行定位，位置將由TRBL決定。

• 如果設定TRBL，並且父級設定position屬性(無論是absolute還是relative)，則以父級的左上角為原點進行定位，位置由 TRBL決定。即使父級有Padding屬性，對其也不起作用，說簡單點就是：它只堅持一點，就以父級左上角為原點進行定位，父級的padding對其根 本沒有影響。

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

• 第一：設定TRBL
• 父級設定Position屬性

上面的這個總結非常重要，可以保證你在用absolue佈局頁面的時候，不會錯位，並且隨著瀏覽器的大小或者顯示器解析度的大小，而不發生改變。

Top的值表示物件上邊框與瀏覽器視窗頂部的距離，bottom的值表示物件下邊框與瀏覽器視窗底部的距離，兩者同時存在時，只有Top起作用；如果兩者都未指定，則其頂端將與原文件流位置一致，即垂直保持位置不變。

left的值表示物件左邊框與瀏覽器視窗左邊的距離，right的值表示物件右邊框與瀏覽器視窗右邊的距離，兩者同時存在時，只有left起作用；如果兩者都未指定，則其左邊將與原文件流位置一致，即水平保持位置不變。

relative與absolute的主要區別

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

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

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

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

什麼是文件流？

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

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