在css中關於定位的內容是：
position:relative | absolute | static | fixed
static(靜態)沒有特別的設定，遵循基本的定位規定，不能通過z-index進行層次分級。
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無單位的整數值。可為負數
將窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素,即為文件流。
只有三種情況會使得元素脫離文件流，分別是：浮動、絕對定位和相對定位。
z-index，又稱為物件的層疊順序，它用乙個整數來定義堆疊的層次，整數值越大，則被層疊在越上面，當然這是指同級元素間的堆疊，如果兩個物件的此屬 性具有同樣的值，那麼將依據它們在html文件中流的順序層疊，寫在後面的將會覆蓋前面的。需要注意的是，父子關係是無法用z-index來設定上下關係 的，一定是子級在上父級在下。
注意：使用static 定位或無position定位的元素z-index屬性是無效的。
1.可以位移的元素 （相對定位）
在本文流中，任何乙個元素都被文字流所限制了自身的位置，但是通過css我們依然使得這些元素可以改變自己的位置，我們可以通過float來讓元素浮動，也可以通過margin來讓元素產生位置移動。但事實上那並非是真實的位移，因為，那只是通過加大margin值來實現的障眼法。而真正意義上的位移是通過top,right,bottom,left（下稱trbl，trbl可以折分使用。）針對乙個相對定位的元素所產生的。我們看下面的圖：
我們看圖中是乙個相對定位的元素
#first
而下方是一塊預設定位的黑色區塊
#second
我們看到這個處在文字流的區塊被上面的相對定位擋住了一部分，這說明：「當元素被設定相對定位或是絕對定位後，將自動產生層疊，他們的層疊級別自然的高於文字流」。除非設定其z-index值為負值。並且我們發現當相對定位元素進行位移後，表現內容已經脫離了文字流，只是在本文流中還為原來的相對對定位留下了原有的總寬與總高（內容的高度或是寬度加上 margin\border\padding的數值）。這說明在相對定位中，雖然表現區脫離了原來的文字流，但是在文字流中還還有此相對定位的老窩。這點要特別注意，因為在實際應用中如果相對定位的位移數值過大，那麼原有的區域就會形成一塊空白。
並且我們注意，定位元素的座標點是在margin值的左上邊緣點，即圖中的b點。那麼所有的位移的計算將以這個點為基礎進行元素的推動。
2.可以在任意乙個位置的元素（絕對定位）
如上所述：相對定位只可以在文字流中進行位置的上下左右的移動，同樣存在一定的侷限性，雖然他的表現區脫離了文字流，但是在文字流卻依然為其保留了一席之地，這就好比乙個打工的人他到了外地，但是在老家依然有乙個專屬於他的位置，這個位置不隨他的移動而改變。但是這樣很明顯就會空出一塊空白來，如果希望文字流拋棄這個部分就需要用到絕對定位。絕對定位不光脫離了文字流，而且在文字流中也不會給這個絕對定位元素留下專屬空位。這就好比是乙個工廠裡的職位，如果有乙個工人走了自然會要有別的工人來填充這個位置。而移動出去的部分自然也就成為了自由體。絕對定位將可以通過trbl來設定元素，使之處在任何乙個位置。在父層position屬性為預設值時，trbl的座標原點以body的座標原點為起始。看下圖：
上圖可知，文字流中的內容會頂替絕對定位無素的位置，一點都不會客氣。而絕對定位元素自然的層疊於文字流之上。而在單一的絕對定位中，定位元素將會跑到網頁的左上角，因為那裡是他們的被絕對定位後的座標原點。
3.被關聯的絕對定位
上面說的是單一的絕對定位，而在實際的應用中我們常常會需要用到一種特別的形式。即希望定位元素要有絕對定位的特性，但是又希望絕對定位的座標原點可以固定在網頁中的某乙個點，當這個點被移動時絕對位定元素能保證相對於這個原座標的相對位置。也就是說需要這個絕對定位要跟著網頁移動，而並且是因定在網頁的某乙個固定位置。通常當網頁是居中形式的時候這種效果就會顯得特別的重要。要實現這種效果基本方式就是為這個絕對定位的父級設定為相對定位或是絕對定位。那麼絕對定位的座標就會以父級為座標起始點。
雖然是如此，但是這個座標原點卻並不是父級的座標原點，這是乙個很奇怪的座標位置。我們看一下模型圖示：
我們看到，這個圖中父級為黑灰色區塊，子級為青色區塊。父級是相對定位，子級是絕對定位。子級設定了頂部位移50個畫素，左傾位移50個畫素。那麼我們看，子級的座標原點並不是從父級的座標原點位移50個畫素，而是從父級塊的padding左上邊緣點為座標起始點（即a 點）。而父級這裡如果要產生位置移動，或是瀏覽器視窗大小有所變動都不會影響到這個絕對定位元素與父級的相對定位元素之間的位置關係。這個子級也不用調整數值。
這是一種很特別並且也是非常實用的應用方式。如果你之前對於定位的控制並不自如的話，相信看完對這裡對定位的解釋一定可以把定位使用得隨心所欲。
4.總在視線裡的元素 （固定定位）
position:fixed; 他的含義就是：固定定位。這個固定與絕對定位很像，唯一不同的是絕對定位是被固定在網頁中的某乙個位置，而固定定位則是固定在瀏覽器的視框位置。
relative是position的乙個屬性，是相對定位。
position的預設值是static，（也就是說對於任意乙個元素，如果沒有定義它的position屬性，那麼它的position:static）
如果你想讓這個#demo裡的乙個div#sub相對於#demo定位在右上角的某個地方，應該給#demo相對定位，#sub絕對定位。
absolute是相對於自己最近的父元素來定位的，如果你不給#demo相對定位，那麼#sub的絕對定位就是相對於body來定位的。
relative是相對於自己來定位的，例如：#demo,這時#demo會在相對於它原來的位置上移50px。
另：relative 不脫離文件流，absolute 脫離文件流。也就是說：relative 的元素儘管表面上看到它偏離了原來的位置，但它實際上在文件流中還是沒變。absolute的元素不僅位置改變了，同時也脫離了文件流。
position:relative日常應用的時候一般是設定給position:absolute;的父層的,父層position:relative; 子層position:absolute;的話, 就是依照父層的邊界進行定位的, 不然position:absolute 會逐層向上尋找設定了position:relative的元素邊界, 直到body元素…
寫了個例子如下：
html**
static: 預設值。無特殊定位，物件遵循html定位規則
absolute: 將物件從文件流中拖出,使用left,right,top,bottom 等屬性相對於其最接近的乙個最有定位設定的父物件進行絕對定位。
如果不存在這樣的父物件,則依據body物件。而其層疊通過z-index屬性定義
fixed:未支援。物件定位遵從絕對(absolute)方式。但是要遵守一些規範
relative:物件不可層疊，但將依據 left,right,top,bottom 等屬性在正常文件流中偏移位置
static: 預設值。無特殊定位，物件遵循html定位規則
absolute: 將物件從文件流中拖出,使用left,right,top,bottom 等屬性相對於其最接近的乙個最有定位設定的父物件進行絕對定位。如果不存在這樣的父物件,則依據body物件。而其層疊通過z-index屬性定義
fixed:未支援。物件定位遵從絕對(absolute)方式。但是要遵守一些規範
relative:物件不可層疊，但將依據 left,right,top,bottom 等屬性在正常文件流中偏移位置
CSS定位屬性Position詳解
css中最常用的布局類屬性，乙個是float css浮動屬性float詳解 另乙個就是css定位屬性position。所有元素的預設定位都是 position static，這意味著元素沒有被定位，而且在文件 現在它應該在的位置。一般來說，不用指定 position static，除非想要覆蓋之前設...
CSS定位屬性Position詳解
css定位屬性position詳解 1.position static 相對定位元素會相對於它在正常流中的預設位置偏移。即所有元素的預設定位都是 position static，這意味著元素沒有被定位,元素出現在正常的流中 忽略 top,bottom,left,right 或者 z index 宣告...
position定位屬性
position定位屬性設定值 absolute 絕對定位 脫離原普通流 依據父級 祖先級元素的位置進行定位 如果沒有父級元素，則參照body進行定位 relative 相對定位 相對於原位置的定位，仍然佔據原先普通流的位置 static 元素框正常生成。塊級元素生成乙個矩形框，作為文件流的一部分，...