css中的position（定位）有四個屬性，比較容易搞混，這裡做一個小結來區分方便以後的使用。
position的四個屬性值：1.static 2.fixed 3.relative 4.absolute
1.static定位：position的默認值，一般不設置position屬性時，元素會按照正常的文檔流進行排列。靜態定位的元素不會受到top, bottom, left, right影響。
2.relative： 相對於本身的位置進行偏移（static定位下的元素位置為本身的位置，因為static不受top, bottom, left, right的影響），所以會發生與其他元素重疊的情況，但原本所占的空間不會改變（即static和relative在文檔流中，與fixed和absolute相反）。相對定位元素經常被用來作為絕對定位元素的容器塊。
3.fixed定位： 元素的位置相對於浏覽器窗口是固定位置。即使窗口是滾動的它也不會隨之移動。fixed定位使元素的位置與文檔流無關，因此不占據空間。會與其他元素重疊。（總之，fixed是特殊的absolute）
4.absolute： 絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那麼它的位置相對於<html>，即浏覽器窗口。這句話可以做以下詳解： <div id="parent">
<div id="sub1">sub1</div>
<div id="sub2">sub2</div></div> 當sub1的position設置為absolute後，其到底以誰為對象進行偏移呢？這裡分為兩種情況：
(1).當sub1的父對象(或曾祖父，只要是父級對象)parent也設置了position屬性，且position的屬性值為absolute或者relative時，也就是說，不是默認值的情況，此時sub1按照這個parent來進行定位。
注意，對象雖然確定好了，但有些細節需要您的注意，那就是我們到底以parent的哪個定位點來進行定位呢？如果parent設定了
margin，border，padding等屬性，那麼這個定位點將忽略padding，將會從padding開始的地方(即只從padding的左上
角開始)進行定位，這與我們會想當然的以為會以margin的左上端開始定位的想法是不同的。
接下來的問題是，sub2的位置到哪裡去了呢？由於當position設置為absolute後，會導致sub1溢出正常的文檔流，就像它不屬於
parent一樣，它漂浮了起來，在DreamWeaver中把它稱為“層”，其實意思是一樣的。此時sub2將獲得sub1的位置，它的文檔流不再基於
sub1，而是直接從parent開始。
(2)如果sub1不存在一個有著position屬性的父對象，那麼那就會以body為定位對象，按照浏覽器的窗口進行定位。
絕對定位的元素位置與文檔流無關，與fixed一樣，不占據空間。