Div CSS absolute與relative的區別小結_經驗交流

詳細說明兩者的關係，需配合例子，請先看例子：

以下是引用片段：
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 

 
 
 

 
　top: 5px;
 
　right: 20px;
 
　

 
position: absolute;
 
left: 20px;
 
bottom: 10px;

 
 

 
　top: 5px;
 
　left: 5px;
 
 

 
　position: relative;
 
　left:㠀150pxrelative;
 
　left : 300px; height: 50px; 
 

 

 
　　

 
　 

1

 
　 

2

 
　 

3 p> 
　 

4

 
　 

5

 
　 

　　

position; height:100px; background: 0000;">position; span>;

bodyposition:relative跨度>;
 
左：200px;
 

 
寬度：300px;
 
高度：300px;
 

位置：absolute;

top:20px;
 
右：20px;

 

 
位置：絕對;
 
底部：20px;
 
左：20px;
 
 div> 


> 

 
　 

 

 
 
 

絕對：絕對定位，CSS寫法「position:absolute; ”，它的定位分兩種情況，如下：

1.沒有設定上、右、下、左的情況，默認引用父級的“內容區域原始點”為原始點，上面例子紅色部分(黃色父級區域有Padding 屬性，「座標原始點」和「內容區域原始點」不一樣)。

二、有設定上、右、下、左的情況，這裡又分為以下兩種情況：




(1).級父沒位置屬性，瀏覽器左上角（即Body）為「座標原始點」定位，位置由 Top、Right、Bottom、Left屬性決定，上面範例綠色部分。


相對：相對定位，CSS寫法“position:relative;” ”，參考父級的“內容區域原始點”為原始點，無父級則以Body 的“內容區域原始點”為原始點，位置由Top、Right、Bottom、Left 屬性決定，且有“撐開”

透過上面的例子和講解，相信善於運用絕對與相對並不是一件很困難的事，我們周圍有關於絕對與相對的明顯的事情好例子，比如“網易163免費郵”首頁(http://mail.163.com)，裡面存在大量的引用。

程式碼範例在IE5.5、IE6、FF1.5、Opera9測試通過。