相對定位
使用相對定位的盒子的位置常以標准流的排版方式為基礎，然后使盒子相對於它在原本的標准位置偏移指定的距離。相對定位的盒子仍在標准流中，它后面的盒子仍以標准流方式對待它。
使用relative，即相對定位，除了將position屬性設置為relative之外，還需要指定一定的偏移量，水平方向通過left或者right屬性來指定，豎直方向通過top和bottom來指定。以下為后面實驗的基准代碼。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>position屬性</title> <style type="text/css"> body{ margin:20px; font :Arial 12px; } #father{ background-color:#a0c8ff; border:1px dashed #000000; padding:15px; } #block1{ background-color:#fff0ac; border:1px dashed #000000; padding:10px; } </style> </head> <body> <div id="father"> <div id="block1">Box-1</div> </div> </body> </html>
這是一個很簡單的標准流方式的兩層的盒子，頁面的效果如下圖：
實驗一：一個子塊的情況
下面的CSS樣式代碼中的Box-1處，將position屬性設置為relative，並設置偏移距離，代碼如下：
#block1 {
backgroud-color: #fff0ac;
border: 1px dashed #000000;
padding: 10px;
position: relative;
left: 30px;
top: 30px;
}
下圖可以看出Box-1和原來的位置相比，它向右和向下分別移動了30像素，也就是說，“left:30px”的作用就是使Box-1的新位置在它原來位置的左邊框右側30像素的地方，“top:30px”的作用就是使Box-1的新位置在原來位置的上邊框下側30像素的地方。
這里用到了top和left這兩個CSS屬性，實際上在CSS中一共有4個配合position屬性使用的定位屬性，除top和left之外，還有right和bottom。這4個屬性只有當position屬性設置為absolute、relative和fixed時才有效。而且，在position屬性取值不同時，它們的含義也不同。當position設置為relative時，它們表示各個邊界與原來位置的距離。
top、right、bottom和left這4個屬性除了可以設置為絕對的像素數，還可以設置為百分數。此時，可以看到子塊的寬度依然是未移動前的寬度，撐滿未移動前父塊的內容。只是向右移動了，右邊框超出了父塊。因此，還可以得出另一個結論，當子塊使用相對定位以后，它發生了偏移，即使移動到了父盒子的外面，父盒子也不會變大，就好像子盒子沒有變化一樣。類似的，如果將偏移的數值設置為：right:30px; bottom:30px，其效果圖如下：
現在我們可以得到這樣的結論，使用相對定位的盒子，會相對於它原本的位置，通過偏移指定的距離，到達新的位置。而該相對定位的盒子則仍然位於標准流中，它對父塊沒有任何影響。
實驗二：兩個子塊的情況
下面討論的是兩個子塊的情況。把上面的基礎代碼改為如下代碼，在父div中放兩個子div。首先對它們都不設置任何偏移。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Language" content="zh-cn" /> <title>position屬性</title> <style type="text/css"> body{ margin:20px; font-family:Arial; font-size:12px; } #father{ background-color:#a0c8ff; border:1px dashed #000000; padding:15px; } #father div{ background-color:#fff0ac; border:1px dashed #000000; padding:10px; } #block1{ } #block2{ } </style> </head> <body> <div id="father"> <div id="block1">Box-1</div> <div id="block2">Box-2</div> </div> </body> </html>
效果圖顯示如下：
從上面的代碼中可以看出，現在對兩個子塊的設置還都空着。下面首先將Box-1盒子的CSS設置為：
#block1 {
position: relative;
bottom: 30px;
right: 30px;
}
將子塊1的position屬性設置成了relative，子塊2還沒有設置任何與定位相關的屬性。此時的效果如下圖，與前面的圖相比可以看到子塊1的位置以自身為基准向上和向左各偏移了30像素。而子塊2和前面的圖相比沒有任何變化，就好像子塊1還在原來的位置上。
這一次又驗證了前面實驗1中總結出的結論，並且需要進行一小點兒的改進。因為，使用相對定位的盒子不僅對父塊沒有任何影響，對兄弟盒子也沒有任何影響。那么如果同時設置兩個子塊的position都設置為relative，情況又會如何呢？現在把子塊2也進行相應的設置，代碼如下：
上面的實驗是針對標准流方式進行的，實際上，對浮動的盒子使用相對定位也是一樣的，都會相對於原有的位置進行指定的偏移並到達新的位置，而這一偏移並不會對其后面的兄弟元素帶來任何的影響。
絕對定位
在了解了相對定位之后，下面開始分析absolute定位方式，它表示絕對定位。通過上面的例子可以了解到position屬性需要通過配合偏移一定的距離來實現定位，而其中核心的問題就是以什么作為偏移的基准。絕對定位，盒子的位置以它的包含框為基准進行偏移。絕對定位的盒子從標准流中脫離。這意味着它們對其后的兄弟盒子的定位沒有影響，其它的盒子就好像這個盒子不存在一樣。 以下為后面實驗的基准代碼。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>absolute屬性</title> <style type="text/css"> body{ margin:20px; font-family:Arial; font-size:12px; } #father{ background-color:#a0c8ff; border:1px dashed #000000; padding:15px; } #father div{ background-color:#fff0ac; border:1px dashed #000000; padding:10px; } #block2{ } </style> </head> <body> <div id="father"> <div >Box-1</div> <div id="block2">Box-2</div> <div >Box-3</div> </div> </body> </html>
效果圖如下。可以看到一個父div里面有3個子div，都是標准流方式排列。
實驗三：使用絕對定位
下面嘗試使用絕對定位，代碼中找到對#block2的CSS設置位置，目前它還是空白的，下面將它改為：
#block2 {
position: absolute;
top: 30px;
right: 30px;
}
這是的效果如下圖，以瀏覽器窗口為基准，從右上角開始向下和向左各移動30像素。
是不是所有的絕對定位都以瀏覽器為基准來定位呢？答案是否定的，接下來對上面的代碼做一處修改，為父div增加一個定位樣式，代碼如下：
#father {
background-color: #a0c8ff;
border: 1px dashed #000000;
padding: 15px;
position: relative;
}
如下圖所示效果發生了變化，偏移的距離沒有變化，但是偏移的基准不再是瀏覽器窗口，而是它的父div了。
對於絕對定位的描述為：使用絕對定位的盒子以它的“最近”的一個“已經定位”的“祖先元素”為基准進行偏移。如果沒有已經定位的祖先元素，那么會以瀏覽器窗口為基准進行定位。再有，絕對定位的框從標准流中脫離，這意味着它們對其后的兄弟盒子的定位沒有任何影響，其他的盒子就好像這個盒子不存在一樣。
回到之前的實驗，最初的代碼中，在父div沒有設置position屬性時，Box-2這個div的所有祖先都不符合“已經定位”的要求，因此它會以瀏覽器窗口為基准來定位。而當父div將position屬性設置為relative后，它就符合“已經定位”的要求了，它又是所有祖先中唯一一個已經定位的，也就滿足“最近”這個要求，因此就會以它為基准進行定位了。以后將絕對定位的基准稱為“包含塊”。
實驗四：絕對定位的特殊性質
對於絕對定位，還有一個特殊性質需要介紹。見如下代碼：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> body{ margin:0; } #outerBox { width: 200px; height: 100px; margin: 10px auto; background: silver; } #innerBox { position: absolute; top: 70px; width: 100px; height: 50px; background: orange; } </style> </head> <body> <div id="outerBox"> <div id="innerBox"></div> </div> </body> </html>
代碼中，外面的盒子沒有設置position屬性，內部的盒子設置了絕對定位，但是只在垂直方向指定了偏移量，沒有指定水平方向的偏移量，此時內部的盒子則因為設置了絕對定位屬性，而外層div沒有position屬性，所以的它的定位基准是瀏覽器窗口。但是又由於在水平方向上沒有設置偏移屬性，因此在水平方向它仍然會保持原來應該在的位置，它的左側與外層盒子的左側對齊。因為在垂直方向上設置了“top:70px”，所以距離瀏覽器窗口頂部為70像素。
由此實驗可知，如果設置了絕對定位，而沒有設置偏移屬性，那么它仍然保持原有的位置。
固定定位：
當position的屬性值為fixed，即固定定位。它與絕對定位有些類似，區別主要在於定位的基准不是祖先，而是瀏覽器窗口或其它顯示設備窗口。也就是當訪問者拖動瀏覽器的窗口滾動條時，固定定位的元素相對於瀏覽器窗口的位置保持不變。
z-index空間位置：
z-index屬性用於調整定位時重疊塊的上下位置，與它的名稱一樣，想象頁面為x-y軸，垂直於頁面的方向為z軸，z-index值大的頁面位於其小的上方。z-index屬性的值為整數，可以是正數也可以是負數。當塊被設置了position屬性時，該值便可以設置各塊之間的重疊高低關系。默認的z-index值為0，當兩個塊的z-index值一樣時，將保持原有的高低覆蓋關系。
注：該篇博客源自《CSS設計徹底研究》中的第四章，書中的例子簡明扼要、通俗易懂，因此特copy下來與大家分享，同時也便於今后自己的在線查閱。