<h4>Position定位：relative | absolute </h4>
定位一直是
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)的更加完美。
<h5> 定位的定義：</h5>在CSS中關(guān)于定位的內(nèi)容是：
position:relative | absolute | static | fixed
<h6>static(靜態(tài))</h6>沒有特別的設(shè)定，遵循基本的定位規(guī)定，不能通過z-index進(jìn)行層次分級(jí)。
<h6>relative(相對(duì)定位)</h6>對(duì)象不可層疊、不脫離文檔流，參考自身靜態(tài)位置通過top,bottom,left,right定位，并且可以通過z-index進(jìn)行層次分級(jí)。
<h6>absolute(絕對(duì)定位)</h6>脫離文檔流，通過top,bottom,left,right定位。選取其最近一個(gè)最有定位設(shè)置的父級(jí)對(duì)象進(jìn)行絕對(duì)定位，如果對(duì)象的父級(jí)沒有設(shè)置定位屬性，
absolute元素將以body坐標(biāo)原點(diǎn)進(jìn)行定位，可以通過z-index進(jìn)行層次分級(jí)。
<h6>fixed（固定定位）</h6>這里所固定的參照對(duì)像是可視窗口而并非是body或是父級(jí)元素。可通過z-index進(jìn)行層次分級(jí)
注：CSS中定位的層疊分級(jí)：
z-index: auto | number;
auto 遵從其父對(duì)象的定位
number無(wú)單位的整數(shù)值?？蔀樨?fù)數(shù)
1、相對(duì)定位relative
相對(duì)定位是一個(gè)非常容易掌握的概念。如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，它將出現(xiàn)在它所在的位置上。然后，可以通過設(shè)置垂直或水平位置，讓這個(gè)元素“相對(duì)于”它的起點(diǎn)進(jìn)行移動(dòng)。如果將top設(shè)置為20像素，那么框?qū)⒊霈F(xiàn)在原位置頂部下面20像素的地方。如果將left設(shè)置為20像素，那么會(huì)在元素左邊創(chuàng)建20像素的空間，也就是將元素向右移動(dòng)（見圖2-10）。
<pre>
*#mybox {
position relative;
left: 20px;
top: 20px;
}</pre>
圖2-10 對(duì)元素進(jìn)行相對(duì)定位
在使用相對(duì)定位時(shí)，無(wú)論是否進(jìn)行移動(dòng)，元素仍然占據(jù)原來的空間。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其他框。
當(dāng)Position****屬性值為****Relative時(shí)對(duì)象原來占有的位置保留，其后面的對(duì)象按原來文檔流仍然保持原來的位置 Top的值表示對(duì)象相對(duì)原位置向下偏移的距離 bottom的值表示對(duì)象相對(duì)原位置向上偏移的距離 兩者同時(shí)存在時(shí)，只有Top起作用。 left的值表示對(duì)象相對(duì)原位置向右偏移的距離 right的值表示對(duì)象相對(duì)原位置向左偏移的距離 兩者同時(shí)存在時(shí)，只有l(wèi)eft起作用。
如果相對(duì)定位的對(duì)象有**padding **和****border ****和**** margin****時(shí)，定位的起點(diǎn)不受影響。還是原來物體的位置。
** 2.絕對(duì)定 absolute**
相對(duì)定位實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置。與之相反，絕對(duì)定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間。普通文檔流中其他元素的布局就像絕對(duì)定位的元素不存在時(shí)一樣（見圖2-11）。
圖2-11 對(duì)元素進(jìn)行絕對(duì)定位
絕對(duì)定位的元素的位置相對(duì)于最近的已定位祖先元素。如果元素沒有已定位的祖先元素，那么它的位置相對(duì)于最初的包含塊。根據(jù)用戶代理的不同，最初的包含塊可能是畫布或HTML元素。
與相對(duì)定位的框一樣，絕對(duì)定位的框可以從它的包含塊向上、下、左、右移動(dòng)。這提供了很大的靈活性?？梢灾苯訉⒃囟ㄎ辉陧?yè)面上的任何位置。
對(duì)于定位的主要問題是要記住每種定位的意義。相對(duì)定位是“相對(duì)于”元素在文檔流中的初始位置，而絕對(duì)定位是“相對(duì)于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么是最初的包含塊。
因?yàn)榻^對(duì)定位的框與文檔流無(wú)關(guān)，所以它們可以覆蓋頁(yè)面上的其他元素?？梢酝ㄟ^設(shè)置z-index屬性來控制這些框的堆放次序。z-index值越高，框在堆中的位置就越高。
當(dāng)Position****屬性值為****absolute時(shí)對(duì)象從文檔流中抽取出來，原占有的位置被后面的對(duì)象頂替上來 Top的值表示對(duì)象上邊框與瀏覽器窗口頂部的距離 bottom的值表示對(duì)象下邊框與瀏覽器窗口底部的距離 兩者同時(shí)存在時(shí)，只有Top起作用；如果兩者都未指定，則其頂端將與原文檔流位置一致，即垂直保持位置不變。 left的值表示對(duì)象左邊框與瀏覽器窗口左邊的距離 right的值表示對(duì)象右邊框與瀏覽器窗口右邊的距離 兩者同時(shí)存在時(shí)，只有l(wèi)eft起作用；如果兩者都未指定，則其左邊將與原文檔流位置一致，即水平保持位置不變。 在Position屬性值為absolute的同時(shí)，如果有一級(jí)父對(duì)象（無(wú)論是父對(duì)象還是祖父對(duì)象，或者再高的輩分，一樣）的Position屬性值為Relative時(shí)，則上述的相對(duì)瀏覽器窗口定位將會(huì)變成相對(duì)父對(duì)象定位，這對(duì)精確定位是很有幫助的。
被關(guān)聯(lián)的絕對(duì)定位上面說的是單一的絕對(duì)定位，而在實(shí)際的應(yīng)用中我們常常會(huì)需要用到一種特別的形式。即希望定位元素要有絕對(duì)定位的特性，但是又希望絕對(duì)定位的坐標(biāo)原點(diǎn)可以固定在網(wǎng)頁(yè)中的某一個(gè)點(diǎn)，當(dāng)這個(gè)點(diǎn)被移動(dòng)時(shí)絕對(duì)位定元素能保證相對(duì)于這個(gè)原坐標(biāo)的相對(duì)位置。也就是說需要這個(gè)絕對(duì)定位要跟著網(wǎng)頁(yè)移動(dòng)，而并且是因定在網(wǎng)頁(yè)的某一個(gè)固定位置。通常當(dāng)網(wǎng)頁(yè)是居中形式的時(shí)候這種效果就會(huì)顯得特別的重要。要實(shí)現(xiàn)這種效果基本方式就是為這個(gè)絕對(duì)定位的父級(jí)設(shè)置為相對(duì)定位或是絕對(duì)定位（絕對(duì)定位時(shí)****Left****，****Top****等屬性不設(shè)值，就能固定在沒有設(shè)置****Position****時(shí)應(yīng)該在的位置上）。那么絕對(duì)定位的坐標(biāo)就會(huì)以父級(jí)為坐標(biāo)起始點(diǎn)。
雖然是如此，但是這個(gè)坐標(biāo)原點(diǎn)卻并不是父級(jí)的坐標(biāo)原點(diǎn)，這是一個(gè)很奇怪的坐標(biāo)位置。我們看一下模型圖示：
我們看到，這個(gè)圖中父級(jí)為黑灰色區(qū)塊，子級(jí)為青色區(qū)塊。父級(jí)是相對(duì)定位，子級(jí)是絕對(duì)定位。子級(jí)設(shè)置了頂部位移50個(gè)像素，左傾位移50個(gè)像素。那么我們看，子級(jí)的坐標(biāo)原點(diǎn)并不是從父級(jí)的坐標(biāo)原點(diǎn)位移50個(gè)像素，而是從父級(jí)塊的border左上邊緣點(diǎn)為坐標(biāo)起始點(diǎn)（即A 點(diǎn)）。而父級(jí)這里如果要產(chǎn)生位置移動(dòng)，或是瀏覽器窗口大小有所變動(dòng)都不會(huì)影響到這個(gè)絕對(duì)定位元素與父級(jí)的相對(duì)定位元素之間的位置關(guān)系。這個(gè)子級(jí)也不用調(diào)整數(shù)值。
這是一種很特別并且也是非常實(shí)用的應(yīng)用方式。如果你之前對(duì)于定位的控制并不自如的話，相信看完對(duì)這里對(duì)定位的解釋一定可以把定位使用得隨心所欲。
相對(duì)定位的參照物：
效果圖：
以最近的祖先定位元素為參照物的情況圖6中，Box2設(shè)置成絕對(duì)定位元素，脫離了文檔流，文檔流由box1-box2-box3變?yōu)閎ox1-box3，box2以最近的定位祖先（藍(lán)色框）為參照物。層級(jí)關(guān)系為：
效果圖：
