CSS定位（position屬性）以及top和magin-top的區別
CSS 定位 (Positioning) 屬性允許我們對元素進行定位。
CSS 定位和浮動：CSS 為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式佈局，將佈局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務。
定位的基本思想很簡單，它允許我們定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器視窗本身的位置。
CSS position 屬性可以選擇 4 種不同型別的定位：
static：預設定位，元素框正常生成。塊級元素生成一個矩形框，作為文件流的一部分，行內元素則會建立一個或多個行框，置於其父元素中——這種定位是預設的，一般沒什麼實際的作用。
relative：相對定位 ，不會脫離文件流，類似於static，按順序排列，一般設定也不會有什麼變化，可以通過margin-top/right/bottom/left
absolute：絕對定位，這種定位脫離文件流，可以理解為跟其他的元素不再一個次元中，可以用top/right/bottom/left來控制位置，absolute是相對於最近祖先非static定位來定位的，如果說他的父級定位是預設的，那麼它就會繼續向上找父級的父級，直到找到非static定位為基準點。
fixed：固定定位，這種定位是相對與瀏覽器的視窗來定位，我們經常會看到網頁中右下角有個回頂部的標記，無論滑鼠滑輪怎麼滑動他都不會改變他的位置。
下面以具體程式碼效果為例進一步說明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.div1{
position: relative;
width: 400px;
height: 400px;
border:2px solid red;
background-color:#CCFF99;
margin:50px;
}
.div2{
width: 200px;
height: 200px;
margin:50px;
border:2px solid pink;
background-color:#CC9966;
}
.div3{
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
border:2px solid purple;
background-color:#FF6633;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文件</title>
</head>
<body>
<div class="div1">
<div class="div2">
<div class="div3"></div>
</div>
</div>
</body>
</html>
頁面結果如下：
上面的程式碼中，div1是相對定位，div2是預設定位，div3是絕對定位，而且div2是div3的父級，div2是div3的父級；圖中綠色為div1，咖啡色為div2，橘色為div3。由於div3的父級是div2，它是static定位（預設定位），所以div3會繼續向上找父級的父級—div1，而div1是relative定位（相對定位），所以div3是以div1的位置為基準點定位的。
如果設定div的position屬性為relative，則div3會直接以div2的位置為基準點定位，如下圖所示：
從上圖可以看出來，div3到了div2的左上角，可見其定位基準變成了div2。
在relative定位下top和margin-top的區別：一個div中設定了margin-top:50px; 那麼中間這個50px屬於盒子模型中的一部分；而設定了top：50px，則50px不屬於盒子模型的一部分。
綜上所述，top/right/bottom/left一般在absolutel定位中使用，在relative下也可以使用，但是在預設定位下是不起作用的。
參考部落格：http://blog.csdn.net/lxiang222/article/details/70340084