static

預設值，元素出現在正常的流中。預設值，所以沒什麼好說的。

relative

通過設定水平距離（left/right）或垂直距離（top/bottom），讓這個元素相對於它的起點移動。元素仍然佔據原來的空間。所以當div2偏移100px時，div1，3都保持在原來的位置。

.div2 {
          width: 100px;
          height: 100px; 
          position: relative;
          top: 20px;
          left: 20px;
}

absolute

絕對定位使元素的位置與文件流無關，因此不佔據空間

因為絕對定位的框與文件流無關，所以它們可以覆蓋頁面上的其他元素，這樣就出現了一個層次的問題，我們可以通過z-index屬性來控制這些框的堆放次序。z-index的值越高，框在堆中的位置就越高。

原始狀態：

.div2 {
          width: 100px;
          height: 100px;
          background-color: yellow;
          position
 
: absolute;
          top: 20px;
          left: 20px;
}

設定div2絕對定位：

.div2 {
          width: 100px;
          height: 100px;
          background-color: yellow;
          position: absolute;
          top: 20px;
          left: 20px;
}

看到div3佔據了原來div2的位置，因此說明div2設定了絕對定位之後，脫離了普通文件流。並且是相對於瀏覽器偏移的。

最外層div0設定相對定位：

.div0 {
      position: relative;
}

顯然，現在div2相對於div0進行偏移。

那再試試把div0改成absolute？發現結果還是一樣。

fixed

固定定位的元素，通常相對於瀏覽器視窗或frame進行定位。詳情請參見視窗小廣告。

不管你在哪，廣告總在那。