說說昨天學到的絕對定位和相對定位

前一段時間對於絕對定位和相對定位一直處於模糊狀態，可是昨天在新浪上看到一篇文章，講的很詳細，因此就很開心的把它收藏了。

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;

1.能夠位移的元素 （相對定位）

咱們看圖中是一個相對定位的元素

#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值的左上邊緣點，即圖中的B點。那麼全部的位移的計算將以這個點爲基礎進行元素的推進。

2.能夠在任意一個位置的元素（絕對定位）
相對定位只能夠在文本流中進行位置的上下左右的移動，一樣存在必定的侷限性，雖然他的表現區脫離了文本流，可是在文本流卻依然爲其保留了一席之地，這就好 比一個打工的人他到了外地，可是在老家依然有一個專屬於他的位置，這個位置不隨他的移動而改變。可是這樣很明顯就會空出一塊空白來，若是但願文本流拋棄這 個部分就須要用到絕對定位。絕對定位不光脫離了文本流，並且在文本流中也不會給這個絕對定位元素留下專屬空位。這就比如是一個工廠裏的職位，若是有一個工 人走了天然會要有別的工人來填充這個位置。而移動出去的部分天然也就成爲了自由體。絕對定位將能夠經過TRBL來設置元素，使之處在任何一個位置。在父層 position屬性爲默認值時，TRBL的座標原點以body的座標原點爲起始。看下圖：



上圖可知，文本流中的內容會頂替絕對定位無素的位置，一點都不會客氣。而絕對定位元素天然的層疊於文本流之上。而在單一的絕對定位中，定位元素將會跑到網頁的左上角，由於那裏是他們的被絕對定位後的座標原點。

3.被關聯的絕對定位

實際的應用中咱們經常會須要用到一種特別的形式。即但願定位元素要有絕對定位的特性，可是又但願絕對定位的座標原點能夠固定在網頁中的某一個點，當這個點 被移動時絕對位定元素能保證相對於這個原座標的相對位置。也就是說須要這個絕對定位要跟着網頁移動，而而且是因定在網頁的某一個固定位置。一般當網頁是居 中形式的時候這種效果就會顯得特別的重要。要實現這種效果基本方式就是爲這個絕對定位的父級設置爲相對定位或是絕對定位。那麼絕對定位的座標就會以父級爲 座標起始點。
雖然是如此，可是這個座標原點卻並非父級的座標原點，這是一個很奇怪的座標位置。咱們看一下模型圖示：

咱們看到，這個圖中父級爲黑灰色區塊，子級爲青色區塊。父級是相對定位，子級是絕對定位。子級設置了頂部位移50個像素，左傾位移50個像素。那麼咱們看，子級的座標原點並非從父級的座標原點位移50個像素，而是從父級塊的padding左上邊緣點爲座標起始點（即A 點）。而父級這裏若是要產生位置移動，或是瀏覽器窗口大小有所變更都不會影響到這個絕對定位元素與父級的相對定位元素之間的位置關係。這個子級也不用調整數值。

4.總在視線裏的元素 （固定定位）

    position:fixed; 他的含義就是：固定定位。這個固定與絕對定位很像，惟一不一樣的是絕對定位是被固定在網頁中的某一個位置，而固定定位則是固定在瀏覽器的視框位置。