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

定位的定義：

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

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

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

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

fixed 固定定位，這里他所固定的對(duì)像是可視窗口而并非是body或是父級(jí)元素。可通過(guò)z-index進(jìn)行層次分級(jí)。

CSS中定位的層疊分級(jí)：z-index: auto | namber;

auto 遵從其父對(duì)象的定位

namber 無(wú)單位的整數(shù)值。可為負(fù)數(shù)

定位的原理：

可以位移的元素 （相對(duì)定位）

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

我們看圖中是一個(gè)寬度為200px，高度為50px，margin:25px; border:25px solid #333; padding:25px; 相對(duì)定位的元素，并且位移距上50px，距左50px。而下方是一塊默認(rèn)定位的黑色區(qū)塊。我們看到這個(gè)處在文本流的區(qū)塊被上面的相對(duì)定位擋住了一部分，這說(shuō)明：“當(dāng)元素被設(shè)置相對(duì)定位或是絕對(duì)定位后，將自動(dòng)產(chǎn)生層疊，他們的層疊級(jí)別自然的高于文本流”。除非設(shè)置其z-index值為負(fù)值，但是在Firefox等瀏覽器中z-index為負(fù)值時(shí)將不會(huì)顯示。并且我們發(fā)現(xiàn)當(dāng)相對(duì)定位元素進(jìn)行位移后，表現(xiàn)內(nèi)容已經(jīng)脫離了文本流，只是在本文流中還為原來(lái)的相對(duì)定位留下了原有的總寬與總高（內(nèi)容的高度或是寬度加上margin/border/padding的數(shù)值）。這說(shuō)明在相對(duì)定位中，雖然表現(xiàn)區(qū)脫離了原來(lái)的文本流，但是在文本流中還還有此相對(duì)定位的老