定位一直是WEB標準應(yīng)用中的難點,如果理不清楚定位那么可能應(yīng)實現(xiàn)的效果實現(xiàn)不了,實現(xiàn)了的效果可能會走樣,
詳解css定位與定位應(yīng)用
。如果理清了定位的原理,那定位會讓網(wǎng)頁實現(xiàn)的更加完美。定位的定義:
在CSS中關(guān)于定位的內(nèi)容是:position:relative | absolute | static | fixed
static 沒有特別的設(shè)定,遵循基本的定位規(guī)定,不能通過z-index進行層次分級。
relative 不脫離文檔流,參考自身靜態(tài)位置通過 top,bottom,left,right 定位,并且可以通過z-index進行層次分級。
absolute 脫離文檔流,通過 top,bottom,left,right 定位。選取其最近的父級定位元素,當父級 position 為 static 時,absolute元素將以body坐標原點進行定位,可以通過z-index進行層次分級。
fixed 固定定位,這里他所固定的對像是可視窗口而并非是body或是父級元素?赏ㄟ^z-index進行層次分級。
CSS中定位的層疊分級:z-index: auto | namber;
auto 遵從其父對象的定位
namber 無單位的整數(shù)值。可為負數(shù)
定位的原理:
可以位移的元素 (相對定位)
在本文流中,任何一個元素都被文本流所限制了自身的位置,但是通過CSS我們依然使得這些元素可以改變自己的位置,我們可以通過float來讓元素浮動,我們也可以通過margin來讓元素產(chǎn)生位置移動。但是事實上那并非是真實的位移,因為,那只是通過加大margin值來實現(xiàn)的障眼法。而真正意義上的位移是通過top,right,bottom,left(下稱TRBL,TRBL可以折分使用。)針對一個相對定位的元素所產(chǎn)生的。我們看下面的圖:
[next]
我們看圖中是一個寬度為200px,高度為50px,margin:25px; border:25px solid #333; padding:25px; 相對定位的元素,并且位移距上50px,距左50px,
電腦資料
《詳解css定位與定位應(yīng)用》(http://www.oriental01.com)。而下方是一塊默認定位的黑色區(qū)塊。我們看到這個處在文本流的區(qū)塊被上面的相對定位擋住了一部分,這說明:“當元素被設(shè)置相對定位或是絕對定位后,將自動產(chǎn)生層疊,他們的層疊級別自然的高于文本流”。除非設(shè)置其z-index值為負值,但是在 Firefox等瀏覽器中z-index為負值時將不會顯示。并且我們發(fā)現(xiàn)當相對定位元素進行位移后,表現(xiàn)內(nèi)容已經(jīng)脫離了文本流,只是在本文流中還為原來的相對對定位留下了原有的總寬與總高(內(nèi)容的高度或是寬度加上margin\border\padding的數(shù)值)。這說明在相對定位中,雖然表現(xiàn)區(qū)脫離了原來的文本流,但是在文本流中還還有此相對定位的老窩。這點要特別注意,因為在實際應(yīng)用中如果相對定位的位移數(shù)值過大,那么原有的區(qū)域就會形成一塊空白。并且我們注意,定位元素的坐標點是在margin值的左上邊緣點,即圖中的B點。那么所有的位移的計算將以這個點為基礎(chǔ)進行元素的推動。當TRBL為正值時位移的方向是內(nèi)聚的。由此可推,當TRBL為負值時位移的方向是外放的。在圖片中有位移的箭頭指向標識,帶有加號的是正值位移方向,帶有減號的是負值位移方向。關(guān)于位移方位,可以延伸閱讀懌飛的《由淺入深漫談margin屬性(一)》
可以在任意一個位置的元素 (絕對定位)
如上所述:相對定位只可以在文本流中進行位置的上下左右的移動,同樣存在一定的局限性,雖然他的表現(xiàn)區(qū)脫離了文本流,但是在文本流卻依然為其保留了一席之地,這就好比一個打工的人他到了外地,但是在老家依然有一個專屬于他的位置,這個位置不隨他的移動而改變。但是這樣很明顯就會空出一塊空白來,如果希望文本流拋棄這個部分就需要用到絕對定位。絕對定位不光脫離了文本流,而且在文本流中也不會給這個絕對定位元素留下專屬空位。這就好比是一個工廠里的職位,如果有一個工人走了自然會要有別的工人來填充這個位置。而移動出去的部分自然也就成為了自由體。絕對定位將可以通過TRBL來設(shè)置元素,使之處在任何一個位置。在父層position屬性為默認值時,TRBL的坐標原點以body的坐標原點為起始?聪聢D:
上圖可知,文本流中的內(nèi)容會頂替絕對定位無素的位置,一點都不會客氣。而絕對定位元素自然的層疊于文本流之上。而在單一的絕對定位中,定位元素將會跑到網(wǎng)頁的左上角,因為那里是他們的被絕對定位后的坐標原點。[next]
被關(guān)聯(lián)的絕對定位
上面說的是單一的絕對定位,而在實際的應(yīng)用中我們常常會需要用到一種特別的形式。即希望定位元素要有絕對定位的特性,但是又希望絕對定位的坐標原點可以固定在網(wǎng)頁中的某一個點,當這個點被移動時絕對位定元素能保證相對于這個原坐標的相對位置。也就是說需要這個絕對定位要跟著網(wǎng)頁移動,而并且是因定在網(wǎng)頁的