position屬性有四個可選值，它們分別是：static、absolute、fixed、relative。
用Div+CSS進行網站佈局時，做一些浮動層等特殊效果時要考慮到定位問題。這就要用到Position屬性等。
【Static】
static（靜態定位）是默認值，元素出現在正常的流中。不會受到top, bottom, left, right影響。
【Relative】
相對定位元素的定位是相對自己原本的正常位置。依據left，right，top，bottom等屬性在正常文檔流中偏移位置。
可以移動的相對定位元素的內容和相互重疊的元素，它原本所佔的空間不會改變。
相對定位元素經常被用來作爲絕對定位元素的容器塊。
- 第三個
<p>發生了位置變化，分別向右向下移動了10px； - 其他的三個
<p>位置沒有發生變化，這一點也很重要。
因此，relative會導致自身位置的相對變化，而不會影響其他元素的位置、大小的變化。
Top的值表示對象相對原位置向下偏移的距離，bottom的值表示對象相對原位置向上偏移的距離，兩者同時存在時，只有Top起作用。
left的值表示對象相對原位置向右偏移的距離，right的值表示對象相對原位置向左偏移的距離，兩者同時存在時，只有left起作用。
【Absolute】
將對象從文檔流中拖出，使用left，right，top，bottom等屬性進行絕對定位，而其層疊通過z-index屬性定義。此時對象不具有邊距，但仍有補白和邊框。絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那麼它的位置相對於<html>。
從上面的結果中，我們能看出幾點信息：
1. absolute元素脫離了文檔結構。和relative不同，其他三個元素的位置重新排列了。只要元素會脫離文檔結構，它就會產生破壞性，導致父元素坍塌。
Absolutely定位使元素的位置與文檔流無關，因此不佔據空間。
2. absolute元素具有“包裹性”。之前<p>的寬度是撐滿整個屏幕的，而此時<p>的寬度剛好是內容的寬度。
3. absolute元素具有“跟隨性”。雖然absolute元素脫離了文檔結構，但是它的位置並沒有發生變化，還是老老實實的呆在它原本的位置，因爲我們此時沒有設置top、left的值。
4. absolute元素會懸浮在頁面上方，會遮擋住下方的頁面內容。
使用絕對定位的層前面的或者後面的層會認爲這個層並不存在，也就是在z方向上，它是相對獨立出來的，絲毫不影響到其它z方向的層。
Top的值表示對象上邊框與瀏覽器窗口頂部的距離，bottom的值表示對象下邊框與瀏覽器窗口底部的距離，兩者同時存在時，只有Top起作用；如果兩者都未指定，則其頂端將與原文檔流位置一致，即垂直保持位置不變。
left的值表示對象左邊框與瀏覽器窗口左邊的距離，right的值表示對象右邊框與瀏覽器窗口右邊的距離，兩者同時存在時，只有left起作用；如果兩者都未指定，則其左邊將與原文檔流位置一致，即水平保持位置不變。
再提幾個小知識點。
1. 設置absolute會使得inline元素被“塊”化，這在上一節將display時已經說過；
2. 設置absolute會使得元素已有的float失效。不過float和absolute同時使用的情況不多；
3. 上文提到了absolute會使元素懸浮在頁面之上，如果有多個懸浮元素，層級如何確定？答案是“後來者居上”
【Fixed】
其實fixed和absolute是一樣的，唯一的區別在於：absolute元素是根據最近的定位上下文確定位置，而fixed永遠根據瀏覽器確定位置。
即使窗口是滾動的它也不會移動：
- Fixed定位使元素的位置與文檔流無關，因此不佔據空間。
- Fixed定位的元素和其他元素重疊。
- IE6不支持CSS中的position:fixed屬性
【Z-index】
垂直定位：
Z軸方向上的層疊定位。
Z-index默認值都爲0，
但默認情況下，後來者會覆蓋前者，此時，如果需要改變層級關係，就要通過改變z-index值來實現。z-index越大優先級越高。
如果將 position 設爲 relative (相對定位)，absolute (絕對定位) 或者 fixed (固定定位)，這樣的節點會覆蓋沒有設置 position 屬性或者屬性值爲 static 的節點，說明前者比後者的默認層級高。
例如彈出層時用到最多。
在Position屬性值爲absolute的同時，如果有一級父對象（無論是父對象還是祖父對象，或者再高的輩分，一樣）的Position屬性值爲Relative時，則上述的相對瀏覽器窗口定位將會變成相對父對象定位，這對精確定位是很有幫助的。