本節(jié)和大家重點(diǎn)討論一下CSS定位的概念和應(yīng)用，主要包括CSS絕對定位，相對定位和關(guān)聯(lián)定位等內(nèi)容，如果理不清楚CSS定位那么可能應(yīng)實(shí)現(xiàn)的效果實(shí)現(xiàn)不了，實(shí)現(xiàn)了的效果可能會走樣；而如果理清了CSS定位的原理，那定位會讓網(wǎng)頁實(shí)現(xiàn)的更加***。

詳細(xì)分析CSS定位與定位應(yīng)用

　　定位一直是WEB標(biāo)準(zhǔn)應(yīng)用中的難點(diǎn)，如果理不清楚定位那么可能應(yīng)實(shí)現(xiàn)的效果實(shí)現(xiàn)不了，實(shí)現(xiàn)了的效果可能會走樣。如果理清了定位的原理，那定位會讓網(wǎng)頁實(shí)現(xiàn)的更加***。

CSS定位的定義：

　　在CSS中關(guān)于定位的內(nèi)容是：position:relative|absolute|static|fixed

　　static沒有特別的設(shè)定，遵循基本的定位規(guī)定，不能通過z-index進(jìn)行層次分級。

　　relative不脫離文檔流，參考自身靜態(tài)位置通過top,bottom,left,right定位，并且可以通過z-index進(jìn)行層次分級。

　　absolute脫離文檔流，通過top,bottom,left,right定位。選取其最近的父級定位元素，當(dāng)父級position為static時，absolute元素將以body坐標(biāo)原點(diǎn)進(jìn)行定位，可以通過z-index進(jìn)行層次分級。

　　fixed固定定位，這里他所固定的對像是可視窗口而并非是body或是父級元素?？赏ㄟ^z-index進(jìn)行層次分級。

CSS定位的層疊分級：z-index:auto|namber;

　　auto遵從其父對象的定位

　　namber無單位的整數(shù)值?？蔀樨?fù)數(shù)

CSS定位的原理：

　　可以位移的元素（相對定位）

　　在本文流中，任何一個元素都被文本流所限制了自身的位置，但是通過CSS我們依然使得這些元素可以改變自己的位置，我們可以通過float來讓元素浮動，我們也可以通過margin來讓元素產(chǎn)生位置移動。但是事實(shí)上那并非是真實(shí)的位移，因?yàn)?，那只是通過加大margin值來實(shí)現(xiàn)的障眼法。而真正意義上的位移是通過top,right,bottom,left（下稱TRBL，TRBL可以折分使用。）針對一個相對定位的元素所產(chǎn)生的。我們看下面的圖：

CSS定位之相對定位

　　我們看圖中是一個寬度為200px，高度為50px，margin:25px;border:25pxsolid#333;padding:25px;相對定位的元素，并且位移距上50px，距左50px。而下方是一塊默認(rèn)定位的黑色區(qū)塊。我們看到這個處在文本流的區(qū)塊被上面的相對定位擋住了一部分，這說明：“當(dāng)元素被設(shè)置相對定位或是絕對定位后，將自動產(chǎn)生層疊，他們的層疊級別自然的高于文本流”。除非設(shè)置其z-index值為負(fù)值，但是在Firefox等瀏覽器中z-index為負(fù)值時將不會顯示。并且我們發(fā)現(xiàn)當(dāng)相對定位元素進(jìn)行位移后，表現(xiàn)內(nèi)容已經(jīng)脫離了文本流，只是在本文流中還為原來的相對對定位留下了原有的總寬與總高（內(nèi)容的高度或是寬度加上margin\border\padding的數(shù)值）。這說明在相對定位中，雖然表現(xiàn)區(qū)脫離了原來的文本流，但是在文本流中還還有此相對定位的老窩。這點(diǎn)要特別注意，因?yàn)樵趯?shí)際應(yīng)用中如果相對定位的位移數(shù)值過大，那么原有的區(qū)域就會形成一塊空白。

　　并且我們注意，定位元素的坐標(biāo)點(diǎn)是在margin值的左上邊緣點(diǎn)，即圖中的B點(diǎn)。那么所有的位移的計算將以這個點(diǎn)為基礎(chǔ)進(jìn)行元素的推動。當(dāng)TRBL為正值時位移的方向是內(nèi)聚的。由此可推，當(dāng)TRBL為負(fù)值時位移的方向是外放的。在圖片中有位移的箭頭指向標(biāo)識，帶有加號的是正值位移方向，帶有減號的是負(fù)值位移方向。#p#

可以在任意一個位置的元素（絕對定位）

　　如上所述：CSS定位中的相對定位只可以在文本流中進(jìn)行位置的上下左右的移動，同樣存在一定的局限性，雖然他的表現(xiàn)區(qū)脫離了文本流，但是在文本流卻依然為其保留了一席之地，這就好比一個打工的人他到了外地，但是在老家依然有一個專屬于他的位置，這個位置不隨他的移動而改變。但是這樣很明顯就會空出一塊空白來，如果希望文本流拋棄這個部分就需要用到絕對定位。絕對定位不光脫離了文本流，而且在文本流中也不會給這個絕對定位元素留下專屬空位。這就好比是一個工廠里的職位，如果有一個工人走了自然會要有別的工人來填充這個位置。而移動出去的部分自然也就成為了自由體。絕對定位將可以通過TRBL來設(shè)置元素，使之處在任何一個位置。在父層position屬性為默認(rèn)值時，TRBL的坐標(biāo)原點(diǎn)以body的坐標(biāo)原點(diǎn)為起始?？聪聢D：

CSS定位之絕對定位

　　上圖可知，文本流中的內(nèi)容會頂替絕對定位無素的位置，一點(diǎn)都不會客氣。而絕對定位元素自然的層疊于文本流之上。而在單一的絕對定位中，定位元素將會跑到網(wǎng)頁的左上角，因?yàn)槟抢锸撬麄兊谋唤^對定位后的坐標(biāo)原點(diǎn)。

被關(guān)聯(lián)的絕對定位

　　上面說的是CSS定位中單一的絕對定位，而在實(shí)際的應(yīng)用中我們常常會需要用到一種特別的形式。即希望定位元素要有絕對定位的特性，但是又希望絕對定位的坐標(biāo)原點(diǎn)可以固定在網(wǎng)頁中的某一個點(diǎn)，當(dāng)這個點(diǎn)被移動時絕對位定元素能保證相對于這個原坐標(biāo)的相對位置。也就是說需要這個絕對定位要跟著網(wǎng)頁移動，而并且是因定在網(wǎng)頁的某一個固定位置。通常當(dāng)網(wǎng)頁是居中形式的時候這種效果就會顯得特別的重要。要實(shí)現(xiàn)這種效果基本方式就是為這個絕對定位的父級設(shè)置為相對定位或是絕對定位。那么絕對定位的坐標(biāo)就會以父級為坐標(biāo)起始點(diǎn)。

　　雖然是如此，但是這個坐標(biāo)原點(diǎn)卻并不是父級的坐標(biāo)原點(diǎn)，這是一個很奇怪的坐標(biāo)位置。我們看一下模型圖示：

CSS定位之關(guān)聯(lián)定位

　　我們看到，這個圖中父級為黑灰色區(qū)塊，子級為青色區(qū)塊。父級是相對定位，子級是絕對定位。子級設(shè)置了頂部位移50個像素，左傾位移50個像素。那么我們看，子級的坐標(biāo)原點(diǎn)并不是從父級的坐標(biāo)原點(diǎn)位移50個像素，而是從父級塊的padding左上邊緣點(diǎn)為坐標(biāo)起始點(diǎn)（即A點(diǎn)）。而父級這里如果要產(chǎn)生位置移動，或是瀏覽器窗口大小有所變動都不會影響到這個絕對定位元素與父級的相對定位元素之間的位置關(guān)系。這個子級也不用調(diào)整數(shù)值。

　　這是一種很特別并且也是非常實(shí)用的應(yīng)用方式。如果你之前對于定位的控制并不自如的話，相信看完對這里對定位的解釋一定可以把定位使用得隨心所欲。

總在視線里的元素（固定定位）

　　由于廣告的濫用，使得一些瀏覽器軟件都開始有了廣告內(nèi)容攔截，使得一些很好的效果現(xiàn)在都不推薦使用了。比如讓一個元素可能隨著網(wǎng)頁的滾動而不斷改變自己的位置。而現(xiàn)在我可以通過CSS中的一個定位屬性來實(shí)現(xiàn)這樣的一個效果，這個元素屬性就是曾經(jīng)不被支持的position:fixed;他的含義就是：固定定位。這個固定與絕對定位很像，***不同的是絕對定位是被固定在網(wǎng)頁中的某一個位置，而固定定位則是固定在瀏覽器的視框位置。

　　雖然原來的瀏覽器并不支持過個屬性，但是瀏覽器的發(fā)展使得現(xiàn)在的高級瀏覽器都可以正確的解析這個CSS屬性。并且通過CSSHACK來讓IE6都可以實(shí)現(xiàn)這樣的效果（目前無法使IE5.x）實(shí)現(xiàn)這種效果。

【編輯推薦】

1. 三大CSS定位機(jī)制和position屬性用法
2. 詳解CSS定位屬性Position用法
3. 14大CSS工具提高網(wǎng)頁設(shè)計效率
4. 詳解CSS定位語法應(yīng)用
5. 鼠標(biāo)經(jīng)過時改變DIV背景顏色的三種途徑