所有的框模型一開始都是按文檔中正常的元素流定位，而定位position屬性允許我們改變這些自然的位置。通過利用一些簡單的Css規則，position使得設計者可以將HTML元素精確放置，position屬性確定了每個元素框（box）定位的參考點。
在詳細介紹之前，我們先簡要的說明一下定位的4種方法：
1、靜止定位（static）：這種方法使得所有的元素最終位置都是一個靜止位置。所以沒有什么需要特殊說的。
2、絕對定位（absolute）：這種方法允許用戶指定元素的左上角、右下角或者其他的參考點和最近的父元素之間的關系將該元素從正常的文檔流中拖出來。當頁面滾動時，元素將保持它們各自的位置不變，隨著頁面一起滾動，就像粘在一起一樣。
3、固定定位（fixed）：這種方法允許元素相對于實際的瀏覽器窗口放置。
4、相對定位（relative）：這方法定義相對于在默認情況下瀏覽器把它放置的位置。這個很難解釋，可喜的是這個方法使用的很少。
靜止定位static
定位的默認值static，不使用定位屬性和使用這個值對頁面沒有什么效果的。
絕對定位absolute
當一個元素被絕對定位了，瀏覽器做的第一件事是把它從流中完全移走，接著放置在定位屬性指定的位置上。看看下面的例子：
#sidebar{
position:absolute;
top:100px;
right:200px;
width:280px;
}
上面說了被絕對定位的元素從流中間移走了，所以在流中間的任何元素將不會受到影響，看見過網站上的小廣告吧，后面的文字不會受其任何的影響，就是這樣的效果！還有這里介紹的定位是指元素，對！是元素，也就是說你可以使用在任何的元素上（包括內聯元素哦），當然更多的是使用在div上。
那如果我放置兩個絕對定位的元素，誰會被遮擋住呢？這里需要介紹一個叫做z-index的屬性，將這個屬性設置的值越大，那個元素就會出現的上面。我們來看看邊上的效果。我們將前面的元素設置z-index:99;
在絕對定位元素內嵌套的元素進行絕對定位會怎么樣呢？這件事情是要說清楚的，不要說我們沒有告訴你啊，它使用的絕對定位是相對于它的父級位置的，而不是整個頁面的。
注意：個人認為不要使用絕對定位的方式去布局你的網站，因為網站的內容往往會根據你數據庫內容的多少來顯示，也就是說你不能完全確定網站的高度（還有一個原因不是確定高度是因為寬屏的電腦越來越多了）。而絕對定位以后你將不能應對這樣的變化，比如你不能確定你的頁腳放置在什么位置上合適。
固定定位fixed
固定定位指定元素的位置和你使用絕對定位基本相同，不過作用不同。它的位置是相對于瀏覽器窗口的，下面的那個div就是的，你滾動一下鼠標的滾輪看看就清楚了。
#sidebar{
position:fixed;
top:300px;
left:-90px;
width:280px;
}
注意：position:fixed;這個屬性在IE6里面居然不兼容！現在使用IE6的可不少啊，那總不能就這樣放任不管了吧，我提供了一個簡單事例，大家可以看看通過Css hack是如何解決這個問題的。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>position:fixed in IE6 修正</title>
<style type="text/css">
<!--
body{padding:0 10px;height:100%;
font-size:12px;overflow-y:auto;}
#leftMenu { background: #CCCCCC; height: 300px; width: 150px;
position: fixed; left: 40px; top: 30px; border: 1px solid #666666; padding: 10px;
letter-spacing: 0.2em; color:#990033;}
#main{ background:#36F; margin-top:450px; margin-bottom:300px;
float:right; padding:10px; color:#FFF;}
* html{overflow-x:auto;overflow-y:hidden;}
* html #leftMenu{position:absolute;}
-->
</style>
</head>
<body>
<div id="leftMenu">
<p>這是左側的菜單，在標準的瀏覽器中采用固定定位，而非標準的瀏覽器（IE6）中，使用了一些HACK，和IE6本身的BUG！</p>
<p>enjoy it!（這句英語帥不？）</p>
</div>
<div id="main">
<p>這個是一個測試，IE6下position:fixed是不能使用的，但是我們使用一些技巧就能完美修復這個BUG！</p>
<p>拖動頁面右邊滾動條，你可以看到，灰色的左菜單始終固定，這種現象不止于IE7、FireFox，在IE6下也有較為完美的表現~這個是一個測試，IE6下position:fixed是不能使用的，但是我們使用一些技巧就能完美修復這個BUG！</p>
</div>
</body>
</html>
相對定位relative
這個方法使用的很少，可能大家都沒有用過，或者別人使用了也看不出來。先來看看它的工作原理，相對定位的元素仍然是頁面流的一部分，不同于絕對定位和固定定位。但是它在顯現自身的最后一刻叛變了，它離開了自己的崗位，偏移到Css指定的位置上，原來的崗位呢？還給他留著呢！
誰逼迫它叛變的？我們使用的position:relative;和瀏覽器就是元兇！大家可以試試看，你指定的家伙是怎么叛變的，我就不做這個惡人了。
