position屬性absolute與relative 詳解

最近一直在研究javascript腳本,熟悉DOM中CSS樣式的各種定位屬性,以前對這個屬性不太瞭解,從網上找到兩篇文章感覺講得很透徹,收藏下來,唯恐忘記。

一.解讀absolute與relative  http://www.blueidea.com/tech/web/2006/4249.asp

很多朋友問過我absolute與relative怎麼區分，怎麼用？我們都知道absolute是絕對定位，relative是相對定位，但是這個絕對與相對是什麼意思呢？絕對是什麼地方的絕對，相對又是相對於什麼地方而言的呢？那他們又有什麼樣的特性，可以做出什麼樣的效果呢？關於兩者之間又有什麼樣的技巧呢？下麵我們就來一一解讀。

Absolute，CSS中的寫法是：position:absolute; 他的意思是絕對定位，他是參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下麵簡稱TRBL)進行定位，在沒有設定TRBL，預設依據父級的做標原始點為原始點。如果設定TRBL並且父級沒有設定position屬性，那麼當前的absolute則以瀏覽器左上角為原始點進行定位，位置將由TRBL決定。

一般來講，網頁居中的話用Absolute就容易出錯，因為網頁一直是隨著解析度的大小自動適應的，而Absolute則會以瀏覽器的左上角為原始點，不會應為解析度的變化而變化位置。很多人出錯就在於這點上出錯。而網頁居左其特性與Relative很相似，但是還是有本質的區別的。

Relative，CSS中的寫法是：position:relative;  他的意思是絕對相對定位，他是參照父級的原始點為原始點，無父級則以BODY的原始點為原始點，配合TRBL進行定位，當父級內有padding等CSS屬性時，當前級的原始點則參照父級內容區的原始點進行定位。

有時我們還需要依靠z-index來設定容器的上下關係，數值越大越在最上面，數值範圍是自然數。當然有一點要註意，父子關係是無法用z-index來設定上下關係的，一定是子級在上父級在下。

二 詳解定位與定位應用 http://blog.sina.com.cn/u/4bcf4a5e010008o0

定位一直是WEB標準應用中的難點，如果理不清楚定位那麼可能應實現的效果實現不了，實現了的效果可能會走樣。如果理清了定位的原理，那定位會讓網頁實現的更加完美。     定位的定義：     在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  無單位的整數值。可為負數 定位的原理： 1.可以位移的元素 （相對定位） 　　在本文流中，任何一個元素都被文本流所限制了自身的位置，但是通過CSS我們依然使得這些元素可以改變自己的位置，我們可以通過float來讓元素浮動，也可以通過margin來讓元素產生位置移動。但事實上那並非是真實的位移，因為，那隻是通過加大margin值來實現的障眼法。而真正意義上的位移是通過top,right,bottom,left（下稱TRBL，TRBL可以折分使用。）針對一個相對定位的元素所產生的。我們看下麵的圖：   我們看圖中是一個相對定位的元素 #first { width:200px; height: 50px; margin:25px; border:25px solid #333; padding:25px; position:relative; top: 50px; left: 50px; } 而下方是一塊預設定位的黑色區塊 #second { width:400px; height:75px; margin:0; border:0; padding:0; backgroud-color:#333; }     我們看到這個處在文本流的區塊被上面的相對定位擋住了一部分，這說明：“當元素被設置相對定位或是絕對定位後，將自動產生層疊，他們的層疊級別自然的高於文本流”。除非設置其z-index值為負值。並且我們發現當相對定位元素進行位移後，表現內容已經脫離了文本流，只是在本文流中還為原來的相對對定位留下了原有的總寬與總高（內容的高度或是寬度加上 margin\border\padding的數值）。這說明在相對定位中，雖然表現區脫離了原來的文本流，但是在文本流中還還有此相對定位的老窩。這點要特別註意，因為在實際應用中如果相對定位的位移數值過大，那麼原有的區域就會形成一塊空白。     並且我們註意，定位元素的坐標點是在margin值的左上邊緣點，即圖中的B點。那麼所有的位移的計算將以這個點為基礎進行元素的推動。 2.可以在任意一個位置的元素（絕對定位）     如上所述：相對定位只可以在文本流中進行位置的上下左右的移動，同樣存在一定的局限性，雖然他的表現區脫離了文本流，但是在文本流卻依然為其保留了一席之地，這就好比一個打工的人他到了外地，但是在老家依然有一個專屬於他的位置，這個位置不隨他的移動而改變。但是這樣很明顯就會空出一塊空白來，如果希望文本流拋棄這個部分就需要用到絕對定位。絕對定位不光脫離了文本流，而且在文本流中也不會給這個絕對定位元素留下專屬空位。這就好比是一個工廠里的職位，如果有一個工人走了自然會要有別的工人來填充這個位置。而移動出去的部分自然也就成為了自由體。絕對定位將可以通過TRBL來設置元素，使之處在任何一個位置。在父層position屬性為預設值時，TRBL的坐標原點以body的坐標原點為起始。看下圖：      上圖可知，文本流中的內容會頂替絕對定位無素的位置，一點都不會客氣。而絕對定位元素自然的層疊於文本流之上。而在單一的絕對定位中，定位元素將會跑到網頁的左上角，因為那裡是他們的被絕對定位後的坐標原點。 3.被關聯的絕對定位    上面說的是單一的絕對定位，而在實際的應用中我們常常會需要用到一種特別的形式。即希望定位元素要有絕對定位的特性，但是又希望絕對定位的坐標原點可以固定在網頁中的某一個點，當這個點被移動時絕對位定元素能保證相對於這個原坐標的相對位置。也就是說需要這個絕對定位要跟著網頁移動，而並且是因定在網頁的某一個固定位置。通常當網頁是居中形式的時候這種效果就會顯得特別的重要。要實現這種效果基本方式就是為這個絕對定位的父級設置為相對定位或是絕對定位。那麼絕對定位的坐標就會以父級為坐標起始點。 雖然是如此，但是這個坐標原點卻並不是父級的坐標原點，這是一個很奇怪的坐標位置。我們看一下模型圖示：     我們看到，這個圖中父級為黑灰色區塊，子級為青色區塊。父級是相對定位，子級是絕對定位。子級設置了頂部位移50個像素，左傾位移50個像素。那麼我們看，子級的坐標原點並不是從父級的坐標原點位移50個像素，而是從父級塊的padding左上邊緣點為坐標起始點（即A 點）。而父級這裡如果要產生位置移動，或是瀏覽器視窗大小有所變動都不會影響到這個絕對定位元素與父級的相對定位元素之間的位置關係。這個子級也不用調整數值。 這是一種很特別並且也是非常實用的應用方式。如果你之前對於定位的控制並不自如的話，相信看完對這裡對定位的解釋一定可以把定位使用得隨心所欲。 4.總在視線里的元素 （固定定位）     position:fixed; 他的含義就是：固定定位。這個固定與絕對定位很像，唯一不同的是絕對定位是被固定在網頁中的某一個位置，而固定定位則是固定在瀏覽器的視框位置。