層的應用及其定位（絕對定位和相對定位）
大家都知道，爲了讓網頁能夠自動地適應用戶設置的分辨率，在網頁製作過程中人們採用了百分比的設置方式，從而頁面的所有元素從新排版，保證原來的格式。但如果你在頁面上使用了層，你會發現當瀏覽器大小改變時，層的位置卻沒有改變，結果它和其他的元素之間的配合出現了錯位現象，頁面變得雜亂無章了。而我們是不能夠強制用戶使用特定的分辨率的，那麼就只有想辦法讓層的位置也能夠象表格一樣根據瀏覽器大小的改變而重新定位，這就需要合理地使用相對定位和絕對定位了。
絕對定位（position:absolute）：即層默認的定位方式，絕對於瀏覽器左上角的邊緣開始計算定位數值。
相對定位（position:relative）：層的位置相對於某個元素設置，該元素位置改變，則層的位置相應改變。
對比兩種定位方式，不難發現，使用相對定位的層纔是真正實現設計者思想的方式，從而完全掌握層的排版。
那麼，絕對定位有沒有用呢？當然有用了，當你的網頁全部使用層來排版，而且頁面是使用默認的居左放置的，那麼使用默認的絕對定位方式可以方便的排版，提高設計的工作效率。
實例演示div+css的絕對定位和相對定位佈局
概要：
本文主要描述XHTML中相對定位和絕對定位各自的本質、用法、區別和兩者之間的關係。以及使用CSS的Left、Right、Top、Bottom屬性（偏移屬性）和Margin屬性（外邊距）對定位塊級元素進行佈局的方法。
說明：
佔位空間：元素在文檔流中所佔據的空間。
物理空間：元素本身所佔據的空間。
下面分3種情況分別對相對定位和絕對定位進行討論：
1.只使用css第一組屬性佈局定位元素的情況
2.只使用css第二組屬性佈局定位元素的情況
3.混合使用第一組和第二組屬性的情況
圖1爲未定位時的初始效果，層級關係爲：
<div
<div box1
<div box2
<div box3
效果圖：
圖1
一、用相對定位佈局塊級元素
元素設置position值： position:relative
此屬性值的設置，元素沒有脫離文檔流，還是普通流定位模型的一部分，會對文檔流中其它元素佈局產生影響。（說明：藍色代表佔位空間，紅色代表元素）
1.僅使用left、right、top和bottom屬性佈局相對定位元素的情況
元素原本所佔的佔位空間仍保留，物理空間偏移。圖2中，設置元素的left和top的值，對box2進行佈局，可以發現除了box2偏移之外，其他塊級元素的位置沒有被影響，可見box2的佔位空間還是存在的。層級關係爲：
<div
<div box1
<div box2 ——– position:relative ; top:-60px; left:80px;
<div box3
效果圖：
圖2
2.僅使用margin屬性佈局相對定位元素的情況
用margin-bottom屬性和margin-top屬性設置負值可以改變文檔流中所佔空間的高度，會影響文檔流中的其它元素位置。例如：margin-top:負值; margin-bottom:負值
圖3中，box1和box2都設置了元素margin-bottom的值，值等於它們高度的負值。box1和box2物理空間沒有改變，佔位空間高度爲0。box3的margin-bottom值設置爲0，物理空間沒有改變，佔位空間高度不變。再通過margin-left對box2和box3設置左偏移值。層級關係爲：
<div
<div box1 ——– position:relative ; margin-bottom:-102px;
<div box2 ——– position:relative ; margin-bottom:-102px; margin-left:110px;
<div box3 ——– position:relative ; margin-bottom:0px; margin-left:220px;
效果圖：
圖3
3.混合使用left、right、top和bottom屬性與margin屬性佈局相對定位元素的情況
此情況，它們的值會產生累加的效果。在CSS2.1中所有的瀏覽器都使用外邊距邊界來完成偏移計算。本文從數學的角度理解爲偏移屬性值和外邊距屬性值累加。圖4中，box2是在圖3的基礎上增加設置left的值產生的效果，可見margin-left的值和left的值產生了累加(偏移量:80px = 110px - 30px)。層級關係爲：
<div
<div box1 ——- position:relative ; margin-bottom:-102px;
<div box2 ——- position:relative ; margin-bottom:-102px;margin-left:110px; left:-30px;
<div box3 ——- position:relative ; margin-bottom:0px; margin-left:220px;
效果圖：
圖4
二、用絕對定位佈局塊級元素
設置position值：position:absolute;此屬性值的設置，元素從文檔流完全刪除。
1.僅使用left、right、top和bottom屬性佈局絕對定位元素的情況
絕對定位的元素的偏移位置以最近的定位(包括相對定位和絕對定位)祖先元素作參照物。如果元素沒有已定位(包括相對定位和絕對定位)的祖先元素，那麼它的參照物爲最頂級元素（由於瀏覽器的默認參照物不同，物可能是BODY或 HTML 元素）。注意：IE下參照物需設置寬度或高度bottom和right屬性纔可以正確的定位。設置元素爲絕對定位元素後，元素的Left、Right、Top和Bottom屬性默認值不是0，只是將元素脫離文檔流。
以下例子說明這個問題。在圖5中，將橘黃色的祖先元素設置爲定位元素（即參照物），box2設爲絕對定位，文檔流由box1-box2-box3變爲box1-box3，可box2卻沒有移動到距離參照物0值的位置上，可見box2的Left、 Right、Top和Bottom屬性默認值不等於0，它只是脫離了文檔流而已。層級關係爲：
<div ———————————position:relative 參照物
<div—————————-沒有設置爲定位元素，不是參照物
<div———————-沒有設置爲定位元素，不是參照物
<div box1
<div box2 ——–absolute
<div box3
效果圖：
圖5
以最近的祖先定位元素爲參照物的情況
圖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
效果圖：
圖6
圖7中，爲改變參照物（橘色框）後的效果。層級關係爲：
<div ——————————— position:relative;最近的祖先定位元素，參照物
<div—————————-沒有設置爲定位元素，不是參照物
<div———————-沒有設置爲定位元素，不是參照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果圖：
圖7
圖8中，參照物爲最頂級的元素情況。層級關係爲：
<div ———————————沒有設置爲定位元素，不是參照物
<div—————————-沒有設置爲定位元素，不是參照物
<div———————-沒有設置爲定位元素，不是參照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果圖：
圖8
2. 僅使用margin屬性佈局絕對定位元素的情況
此情況，margin-bottom 和margin-right的值不再對文檔流中的元素產生影響，因爲該元素已經脫離了文檔流。另外，不管它的祖先元素有沒有定位，都是以文檔流中原來所在的位置上偏移參照物。
圖9中，使用margin屬性佈局相對定位元素。層級關係爲：
<div ——————————— position:relative; 不是參照物
<div—————————-沒有設置爲定位元素，不是參照物
<div———————-沒有設置爲定位元素，不是參照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
<div box3
效果圖：
圖9
IE6的情況下，box2前面沒有兄弟節點，則margin-left的值會出現雙倍邊距，見圖10。層級關係爲：
<div ——————————— position:relative; 不是參照物
<div—————————-沒有設置爲定位元素，不是參照物
<div———————-沒有設置爲定位元素，不是參照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:60px;
<div box3
效果圖：
圖10
3. 混合使用left、right、top和bottom屬性與margin屬性佈局相對定位元素的情況
a.margin屬性和top、bottom、left、right屬性同時使用，如果同一方向偏移，它們的值會產生累加的效果，見圖11。
例如：margin-left:120px; left:-20px; 那麼box2的偏移值爲120px-20px=100px;層級關係爲：
<div ———————————-不是參照物
<div—————————–不是參照物
<div———————–position:relative; 參照物
<div box1
<div box2 ———position:absolute; margin-left:120px; left:-20px; top:50px;
<div box3
效果圖：
圖11
b. 絕對定位和相對定位的累加加效果不同，如果top、bottom、left、right屬性和margin屬性偏移的方向相反，top、bottom、left、right屬性值有效，反方向的margin屬性值無效，見圖12。層級關係爲：
<div ———————————-不是參照物
<div—————————–不是參照物
<div———————–position:relative; 參照物
<div box1
<div box2 ———position:absolute; margin-left:120px; right:10px; top:50px;
<div box3
效果圖：
圖12
總結：
l 相對定位的元素不會脫離文檔流，佔用文檔流的空間，Left; Right; Top和Bottom屬性與margin屬性混合使用會產生累加效果。
l 絕對定位的元素脫離文檔流，偏移不影響文檔流中的其它元素，Left; Right; Top和Bottom屬性與margin屬性混合使用，偏移方向相同值累加，方向相反，margin屬性值無效。
l 絕對定位的元素以最近的定位祖先元素爲參照物。
詳細分析css定位與定位應用
1、定位的定義：
在CSS中關於定位的內容是：position:relative | absolute | static | fixed
static 沒有特別的設定，遵循基本的定位規定，不能通過z-index進行層次分級。
relative 不脫離文檔流，參考自身靜態位置通過 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 | number;
auto 遵從其父對象的定位
number 無單位的整數值。可爲負數
2、定位的原理：
2.1 可以位移的元素 （相對定位）
在文本流中，任何一個元素都被文本流所限制了自身的位置，但是通過CSS我們依然使得這些元素可以改變自己的位置，我們可以通過float來讓元素浮動，我們也可以通過margin來讓元素產生位置移動。但是事實上那並非是真實的位移，因爲，那只是通過加大margin值來實現的障眼法。而真正意義上的位移是通過top,right,bottom,left（下稱TRBL，TRBL可以折分使用。）針對一個相對定位的元素所產生的。我們看下面的圖：
相對定位
我們看圖中是一個寬度爲200px，高度爲50px，margin:25px; border:25px solid #333; padding:25px; 相對定位的元素，並且位移距上50px，距左50px。而下方是一塊默認定位的黑色區塊。我們看到這個處在文本流的區塊被上面的相對定位擋住了一部分，這說明：“當元素被設置相對定位或是絕對定位後，將自動產生層疊，他們的層疊級別自然的高於文本流”，除非設置其z-index值爲負值，但是在 Firefox等瀏覽器中z-index爲負值時將不會顯示。並且我們發現當相對定位元素進行位移後，表現內容已經脫離了文本流，只是在本文流中還爲原來的相對對定位留下了原有的總寬與總高（內容的高度或是寬度加上margin/border/padding的數值）。這說明在相對定位中，雖然表現區脫離了原來的文本流，但是在文本流中還有此相對定位的老窩。這點要特別注意，因爲在實際應用中如果相對定位的位移數值過大，那麼原有的區域就會形成一塊空白。
並且我們注意，定位元素的座標點是在margin值的左上邊緣點，即圖中的B點。那麼所有的位移的計算將以這個點爲基礎進行元素的推動。當TRBL爲正值時位移的方向是內聚的。由此可推，當TRBL爲負值時位移的方向是外放的。在圖片中有位移的箭頭指向標識，帶有加號的是正值位移方向，帶有減號的是負值位移方向。
2.2 可以在任意一個位置的元素 （絕對定位）
如上所述：相對定位只可以在文本流中進行位置的上下左右的移動，同樣存在一定的侷限性，雖然他的表現區脫離了文本流，但是在文本流卻依然爲其保留了一席之地，這就好比一個打工的人他到了外地，但是在老家依然有一個專屬於他的位置，這個位置不隨他的移動而改變。但是這樣很明顯就會空出一塊空白來，如果希望文本流拋棄這個部分就需要用到絕對定位。絕對定位不光脫離了文本流，而且在文本流中也不會給這個絕對定位元素留下專屬空位。這就好比是一個工廠裏的職位，如果有一個工人走了自然會要有別的工人來填充這個位置。而移動出去的部分自然也就成爲了自由體。絕對定位將可以通過TRBL來設置元素，使之處在任何一個位置。在父層position屬性爲默認值時，TRBL的座標原點以body的座標原點爲起始。看下圖：
絕對定位
上圖可知，文本流中的內容會頂替絕對定位無素的位置，一點都不會客氣。而絕對定位元素自然的層疊於文本流之上。而在單一的絕對定位中，定位元素將會跑到網頁的左上角，因爲那裏是他們的被絕對定位後的座標原點。
2.3 被關聯的絕對定位
上面說的是單一的絕對定位，而在實際的應用中我們常常會需要用到一種特別的形式。即希望定位元素要有絕對定位的特性，但是又希望絕對定位的座標原點可以固定在網頁中的某一個點，當這個點被移動時絕對位定元素能保證相對於這個原座標的相對位置。也就是說需要這個絕對定位要跟着網頁移動，而並且是因定在網頁的某一個固定位置。通常當網頁是居中形式的時候這種效果就會顯得特別的重要。要實現這種效果基本方式就是爲這個絕對定位的父級設置爲相對定位或是絕對定位。那麼絕對定位的座標就會以父級爲座標起始點。
雖然是如此，但是這個座標原點卻並不是父級的座標原點，這是一個很奇怪的座標位置。我們看一下模型圖示：
關聯定位
我們看到，這個圖中父級爲黑灰色區塊，子級爲青色區塊。父級是相對定位，子級是絕對定位。子級設置了頂部位移50個像素，左傾位移50個像素。那麼我們看，子級的座標原點並不是從父級的座標原點位移50個像素，而是從父級塊的padding左上邊緣點爲座標起始點（即A點）。而父級這裏如果要產生位置移動，或是瀏覽器窗口大小有所變動都不會影響到這個絕對定位元素與父級的相對定位元素之間的位置關係。這個子級也不用調整數值。
這是一種很特別並且也是非常實用的應用方式。如果你之前對於定位的控制並不自如的話，相信看完對這裏對定位的解釋一定可以把定位使用得隨心所欲。
2.4 總在視線裏的元素 （固定定位）
由於廣告的濫用，使得一些瀏覽器軟件都開始有了廣告內容攔截，使得一些很好的效果現在都不推薦使用了。比如讓一個元素可能隨着網頁的滾動而不斷改變自己的位置。而現在我可以通過CSS中的一個定位屬性來實現這樣的一個效果，這個元素屬性就是曾經不被支持的position:fixed; 他的含義就是：固定定位。這個固定與絕對定位很像，唯一不同的是絕對定位是被固定在網頁中的某一個位置，而固定定位則是固定在瀏覽器的視框位置。
雖然原來的瀏覽器並不支持過個屬性，但是瀏覽器的發展使得現在的高級瀏覽器都可以正確的解析這個CSS屬性。並且通過CSS HACK來讓IE6都可以實現這樣的效果（目前無法使IE5.x）實現這種效果。