定位一直是WEB標準應用中的難點,若是理不清楚定位那麼可能應實現的效果實現不了,實現了的效果可能會走樣。若是理清了定位的原理,那定位會讓網頁實現的更加完美。瀏覽器
定位的定義:
在CSS中關於定位的內容是:佈局
position:relative | absolute | static | fixed代理
static(靜態) 沒有特別的設定,遵循基本的定位規定,不能經過z-index進行層次分級。對象
relative(相對定位) 對象不可層疊、不脫離文檔流,參考自身靜態位置經過 top,bottom,left,right 定位,而且能夠經過z-index進行層次分級。blog
absolute(絕對定位) 脫離文檔流,經過 top,bottom,left,right 定位。選取其最近一個最有定位設置的父級對象進行絕對定位,若是對象的父級沒有設置定位屬性,absolute元素將以body座標原點進行定位,能夠經過z-index進行層次分級。文檔
fixed(固定定位) 這裏所固定的參照對像是可視窗口而並不是是body或是父級元素。可經過z-index進行層次分級。get
注: CSS中定位的層疊分級:z-index: auto | namber;
auto 聽從其父對象的定位 namber無單位的整數值。可爲負數it
一、相對定位relativeio
相對定位是一個很是容易掌握的概念。若是對一個元素進行相對定位,它將出如今它所在的位置上。而後,能夠經過設置垂直或水平位置,讓這個元素「相對於」它的起點進行移動。若是將top設置爲20像素,那麼框將出如今原位置頂部下面20像素的地方。若是將left設置爲20像素,那麼會在元素左邊建立20像素的空間,也就是將元素向右移動(見圖2-10)。原理
#mybox {
position relative;
left: 20px;
top: 20px;
}
圖2-10 對元素進行相對定位
在使用相對定位時,不管是否進行移動,元素仍然佔據原來的空間。所以,移動元素會致使它覆蓋其餘框。
當Position屬性值爲Relative時 對象原來佔有的位置保留,其後面的對象按原來文檔流仍然保持原來的位置 Top的值表示對象相對原位置向下偏移的距離 bottom的值表示對象相對原位置向上偏移的距離 二者同時存在時,只有Top起做用。 left的值表示對象相對原位置向右偏移的距離 right的值表示對象相對原位置向左偏移的距離 二者同時存在時,只有left起做用。
若是相對定位的對象有padding 和border 和 margin時,定位的起點不受影響。仍是原來物體的位置。
2.絕對定 absolute
相對定位實際上被看做普通流定位模型的一部分,由於元素的位置相對於它在普通流中的位置。與之相反,絕對定位使元素的位置與文檔流無關,所以不佔據空間。普通文檔流中其餘元素的佈局就像絕對定位的元素不存在時同樣(見圖2-11)。
圖2-11 對元素進行絕對定位
絕對定位的元素的位置相對於最近的已定位祖先元素。若是元素沒有已定位的祖先元素,那麼它的位置相對於最初的包含塊。根據用戶代理的不一樣,最初的包含塊多是畫布或HTML元素。
與相對定位的框同樣,絕對定位的框能夠從它的包含塊向上、下、左、右移動。這提供了很大的靈活性。能夠直接將元素定位在頁面上的任何位置。
對於定位的主要問題是要記住每種定位的意義。相對定位是「相對於」元素在文檔流中的初始位置,而絕對定位是「相對於」最近的已定位祖先元素,若是不存在已定位的祖先元素,那麼是最初的包含塊。
由於絕對定位的框與文檔流無關,因此它們能夠覆蓋頁面上的其餘元素。能夠經過設置z-index屬性來控制這些框的堆放次序。z-index值越高,框在堆中的位置就越高。
當Position屬性值爲absolute時 對象從文檔流中抽取出來,原佔有的位置被後面的對象頂替上來 Top的值表示對象上邊框與瀏覽器窗口頂部的距離 bottom的值表示對象下邊框與瀏覽器窗口底部的距離 二者同時存在時,只有Top起做用;若是二者都未指定,則其頂端將與原文檔流位置一致,即垂直保持位置不變。 left的值表示對象左邊框與瀏覽器窗口左邊的距離 right的值表示對象右邊框與瀏覽器窗口右邊的距離 二者同時存在時,只有left起做用;若是二者都未指定,則其左邊將與原文檔流位置一致,即水平保持位置不變。 在Position屬性值爲absolute的同時,若是有一級父對象(不管是父對象仍是祖父對象,或者再高的輩分,同樣)的Position屬性值爲Relative時,則上述的相對瀏覽器窗口定位將會變成相對父對象定位,這對精肯定位是頗有幫助的。
被關聯的絕對定位
上面說的是單一的絕對定位,而在實際的應用中咱們經常會須要用到一種特別的形式。即但願定位元素要有絕對定位的特性,可是又但願絕對定位的座標原點能夠固定在網頁中的某一個點,當這個點被移動時絕對位定元素能保證相對於這個原座標的相對位置。也就是說須要這個絕對定位要跟着網頁移動,而而且是因定在網頁的某一個固定位置。一般當網頁是居中形式的時候這種效果就會顯得特別的重要。要實現這種效果基本方式就是爲這個絕對定位的父級設置爲相對定位或是絕對定位(絕對定位時Left,Top等屬性不設值,就能固定在沒有設置Position時應該在的位置上)。那麼絕對定位的座標就會以父級爲座標起始點。
雖然是如此,可是這個座標原點卻並非父級的座標原點,這是一個很奇怪的座標位置。咱們看一下模型圖示:
咱們看到,這個圖中父級爲黑灰色區塊,子級爲青色區塊。父級是相對定位,子級是絕對定位。子級設置了頂部位移50個像素,左傾位移50個像素。那麼咱們看,子級的座標原點並非從父級的座標原點位移50個像素,而是從父級塊的border左上邊緣點爲座標起始點(即A 點)。而父級這裏若是要產生位置移動,或是瀏覽器窗口大小有所變更都不會影響到這個絕對定位元素與父級的相對定位元素之間的位置關係。這個子級也不用調整數值。
這是一種很特別而且也是很是實用的應用方式。若是你以前對於定位的控制並不自如的話,相信看完對這裏對定位的解釋必定能夠把定位使用得爲所欲爲。
相對定位的參照物:
<div ——————————— position:relative;最近的祖先定位元素,參照物
<div—————————-沒有設置爲定位元素,不是參照物
<div———————-沒有設置爲定位元素,不是參照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果圖:
以最近的祖先定位元素爲參照物的狀況
圖6中,Box2設置成絕對定位元素,脫離了文檔流,文檔流由box1-box2-box3變爲box1-box3,box2以最近的定位祖先(藍色框)爲參照物。 層級關係爲:
<div ——————————— position:relative; 不是最近的祖先定位元素,不是參照物
<div—————————-沒有設置爲定位元素,不是參照物
<div———————- position:relative 參照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果圖:
轉自 http://hi.baidu.com/zxc0420/item/9ada5110845ba1e89c778a08