HTML之position:absolute relative static fixed的差別
在了解position:absolute relative static fixed的差別時，我們先需要清楚什麼是文檔流。
一、文檔流：将窗體自上而下分成一行一行,并在每行中按從左至右的挨次排放元素,即為文檔流。
每個非浮動塊級元素都獨有一行, 浮動元素則按規則浮在行的一端. 若當時行容不下, 則另起新行再浮動。内聯元素也不會獨有一行. 一切元素(包括塊級,内聯和清單元素)均可生成子行, 用于擺放子元素。有三種狀況将使得元素離開文檔流而存在,分别是浮動、絕對定位、固定定位.
然則在IE中浮動元素也存在于文檔流中，浮動元素不占任何正常文檔流空間，而浮動元素的定位照樣基于正常的文檔流，然後從文檔流中抽出并盡能夠遠的挪動至左側或許右側。當一個元素脫離正常文檔流後，依然在文檔流中的其他元素将忽略該元素并填補其原先的空間。
基于文檔流，了解以下的定位形式:
相對定位：元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。
絕對定位：即完全離開文檔流, 相關于position屬性非static值的比來父級元素進行偏移。
固定定位：即完全離開文檔流，相關于視區進行偏移。
文檔流是文檔中可顯示對象在排列時所占用的位置。比如網頁的div标簽它預設占用的寬度位置是一整行，p标簽預設占用寬度也是一整行，因為div标簽和p标簽是塊狀對象。
網頁中大部分對象預設是占用文檔流，也有一些對象是不占文檔流的，比如表單中隐藏域。當然我們也可以讓占用文檔流的元素轉換成不占文檔流，這就要用到CSS中屬性position來控制。
二、CSS 2.0對position的定義：檢索對象的定位方式。共有4種取值。
absolute：絕對定位。将對象從文檔流中拖出，使用left，right，top，bottom等屬性相對于其最接近的一個最有定位設定的父對象進行絕對定位。如果不存在這樣的父對象，則依據body對象。而其層疊通過z-index屬性定義
。當對象定位在浏覽器視窗以外，浏覽器是以顯示滾動條。
fixed：固定定位。對象定位遵從絕對(absolute)方式。但是要遵守一些規範。當對象定位在浏覽器視窗以外，浏覽器不會是以顯示滾動條，而當滾動條滾動時，對象始終固定在原來位置。
relative：相對定位。對象不可層疊，但将依據left，right，top，bottom等屬性在正常文檔流中偏移位置。當對象定位在浏覽器視窗以外，浏覽器是以顯示滾動條。
static：元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行内元素則會建立一個或多個行框，置于其父元素中。
inherit：繼承值，對象将繼承其父對象相應的值。
所有的塊元素在html文檔中是按照它們出現在文檔中的先後順序排列的（當然，嵌套不在此列），每一個塊都會另起一行。如下圖
他們對應的html如下：
<html>
<head>
<title>DIV+CSS</title>
<style>
#div1 {
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
}
#div2 {
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
}
#div3 {
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
</html> 三、CSS中的相對定位和絕對定位模型
在文檔流中，每個塊元素都會被安排到流中的一個位置，我們可以通過CSS中的定位屬性來重新安排它的位置。定位分為相對定位和絕對定位， 相對定位是相對于該塊元素在文檔流中的位置的，比如，我們可以使用相對定位把div2放到div1的右側，CSS代碼如下：
#div1 {
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
}
#div2 {
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
position: relative;
top: -64px;
left: 204px;
}
#div3 {
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
} 下面是效果：
可以看到一個有趣的現象，那就是雖然我們把div2移走了，但是div1和div3中間還是有一個空間，
說明相對定位的元素是會占據文檔流空間的，這裡的div2就是典型的“站着茅坑不拉屎”。
使用絕對定位也是可以把div2擺到div1的右邊的，而且絕對定位是不會占據文檔流空間的，如下圖，div1和div3之間沒有空白：
div2的CSS代碼：
#div2 {
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
position: absolute;
top: 15px;
left: 214px;
} 絕對定位是個好東西，可以把内容顯示到頁面上的任何位置，但是對于我們程式員來說，卻不能使用太多的絕對定位，因為使用程式動态向div中添加内容，div的大小是不可知的，無法将每一個div的位置都定死。
四、CSS中的浮動和清除模型
在CSS中，最讓人不好了解的應該算是float和clear意義了。float可以達到這樣一個效果，就是本來應該一行一個的塊元素，如果定義了float屬性，則隻要行的空間足夠，它會跑别的float元素的屁股後面，而不再會單獨占用一行，如下圖：
這裡把div2和div3都定義了為浮動，代碼如下：
#div2 {
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
float:left;
}
#div3 {
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
float:left;
} 那什麼情況下需要clear呢？這是因為float的元素和絕對定位的元素一樣，也是不占用文檔空間的，是以，如果我們把div2和div3都嵌套在div1中，并且把div2和div3都定義為浮動，那麼由于它們不占用文檔空間，設定為浮動後div2和div3都不屬于div1的内容了，是以作為父元素的div1沒有内容填充，不知道自動擴充大小，以至于顯示出來div2和div3會跑到div1的外面，如下圖
下面是它們的html代碼：
<div id="div1">div1
<div id="div2">div2</div>
<div id="div3">div3</div>
</div> 下面是它們的css代碼：
#div1 {
border: 1px solid #000099;
height: 60px;
width: 450px;
margin:2px;
}
#div2 {
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
float:left;
}
#div3 {
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
float:left;
} 因為float的元素不占用文檔流空間，有時候元素還會重疊到float元素上，這裡我就不舉例了。
為了解決上面的問題，就需要在float之後的元素上面使用clear，在此例中，我們在div3後面加入一個空段落，并設定其為clear，如下：
<div id="div1">div1
<div id="div2">div2</div>
<div id="div3">div3</div>
<p class="clear"></p>
</div> clear 屬性定義了元素的哪邊上不允許出現浮動元素。下面是新增加的空段落的CSS代碼：
.clear{
clear:left;
} 這時div1有了p這塊内容（盡管p裡面是空的）,并且clear:為left, 使得p的上外邊框邊界剛好在其上浮動元素的下外邊距邊界之下
效果圖；