在CSS中關於定位的內容是：
relative(相對定位) 對象不可層疊、不脫離文檔流，參考自身靜態位置通過 top,bottom,left,right 定位，並且可以通過z-index進行層次分級。
absolute(絕對定位) 脫離文檔流，通過 top,bottom,left,right 定位。選取其最近一個最有定位設置的父級對象進行絕對定位，如果對象的父級沒有設置定位屬性，absolute元素將以body坐標原點進行定位，可以通過z-index進行層次分級。
fixed（固定定位） 這里所固定的參照對像是 可視窗口而並非是body或是父級元素。可通過z-index進行層次分級。
注：
CSS中定位的層疊分級： z-index: auto | namber;
auto 遵從其父對象的定位
namber 無單位的整數值。可為負數
1.可以位移的元素 （相對定位）
在本文流中，任何一個元素都被文本流所限制了自身的位置，但是通過CSS我們依然使得這些元素可以改變自己的位置，我們可以通過float來讓元素浮動，也可以通過margin來讓元素產生位置移動。但事實上那並非是真實的位移，因為，那只是通過加大margin值來實現的障眼法。而真正意義上的位移是通過top,right,bottom,left（下稱TRBL，TRBL可以折分使用。）針對一個相對定位的元素所產生的。我們看下面的圖：
width:200px;
height: 50px;
margin:25px;
border:25px solid #333;
padding:25px;
position:relative;
top: 50px;
left: 50px;
}
如上所述：相對定位只可以在文本流中進行位置的上下左右的移動，同樣存在一定的局限性，雖然他的表現區脫離了文本流，但是在文本流卻依然為其保留了一席之地，這就好比一個打工的人他到了外地，但是在老家依然有一個專屬於他的位置，這個位置不隨他的移動而改變。但是這樣很明顯就會空出一塊空白來，如果希望文本流拋棄這個部分就需要用到絕對定位。絕對定位不光脫離了文本流，而且在文本流中也不會給這個絕對定位元素留下專屬空位。這就好比是一個工廠里的職位，如果有一個工人走了自然會要有別的工人來填充這個位置。而移動出去的部分自然也就成為了自由體。絕對定位將可以通過TRBL來設置元素，使之處在任何一個位置。在父層position屬性為默認值時，TRBL的坐標原點以body的坐標原點為起始。看下圖：
上面說的是單一的絕對定位，而在實際的應用中我們常常會需要用到一種特別的形式。即希望定位元素要有絕對定位的特性，但是又希望絕對定位的坐標原點可以固定在網頁中的某一個點，當這個點被移動時絕對位定元素能保證相對於這個原坐標的相對位置。也就是說需要這個絕對定位要跟着網頁移動，而並且是因定在網頁的某一個固定位置。通常當網頁是居中形式的時候這種效果就會顯得特別的重要。要實現這種效果基本方式就是為這個絕對定位的父級設置為相對定位或是絕對定位。那么絕對定位的坐標就會以父級為坐標起始點。
雖然是如此，但是這個坐標原點卻並不是父級的坐標原點，這是一個很奇怪的坐標位置。我們看一下模型圖示：
我們看到，這個圖中父級為黑灰色區塊，子級為青色區塊。父級是相對定位，子級是絕對定位。子級設置了頂部位移50個像素，左傾位移50個像素。那么我們看，子級的坐標原點並不是從父級的坐標原點位移50個像素，而是從父級塊的padding左上邊緣點為坐標起始點（即A 點）。而父級這里如果要產生位置移動，或是瀏覽器窗口大小有所變動都不會影響到這個絕對定位元素與父級的相對定位元素之間的位置關系。這個子級也不用調整數值。
這是一種很特別並且也是非常實用的應用方式。如果你之前對於定位的控制並不自如的話，相信看完對這里對定位的解釋一定可以把定位使用得隨心所欲。
4.總在視線里的元素 （固定定位）
position:fixed; 他的含義就是：固定定位。這個固定與絕對定位很像，唯一不同的是絕對定位是被固定在網頁中的某一個位置，而固定定位則是固定在瀏覽器的視框位置。
則：不會隨瀏覽器流動條的滾動而滾動，始終保持自己在瀏覽器在視框中的位置：
例：
<html>
<head>
<title></title>
</head>
<body style="border: 1px solid blue;height: 100%">
<div style="position:absolute;top:500px;left:60px;height:2000px;background-color:yellow;">
This tall div is absolutely positioned 500 pixels from the top and 60 pixels from the left of its containing block.
</div>
<div style="position:fixed;top:100px;left:60px;width:180px;background-color:red;">
這個是固定的DIV
</div>
</body>
</html>