CSS position屬性，

CSS position屬性，

position屬性的定義和用法:
檢索或設定對象的定位方式。
設定此屬性值為absolute 會將對象拖離出正常的文檔流而不考慮它周圍內容的布局。假如其他具有不同z-index屬性的對象已經佔據了給定的位置，他們之間不會相互影響，而會在同一位置層疊。此時對象不具有margin，但仍有padding和邊框border。
要啟用物件的絕對位置，不但要設定此屬性值為absolute，而且必須指定left，right，top，bottom屬性中的至少一個。否則上述屬性會使用他們的預設值auto ，這將導致對象遵從正常的HTML布局規則，在前一個對象之後立即被呈遞。
設定此屬性值為relative 會保持對象在正常的HTML流中，但是會根據對象本身原來的位置進行位移。在相對(relative)定位對象之後的文本或對象佔有他們自己的空間而不會覆蓋被定位對象的自然空間。與此不同的，在絕對(absolute)定位對象之後的文本或對象在被定位對象被拖離正常文檔流之前會佔有它的自然空間。放置絕對(absolute)定位對象在可視地區之外會導致捲軸出現。而放置相對(relative)定位對象在可視地區之外，捲軸不會出現。
對應的指令碼特性為position。 
文法結構:

position：static | relative | absolute | fixed

取值:
static:無特殊定位，對象遵循正常文檔流。top，right，bottom，left等屬性不會被應用，預設值。
relative:對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中位移位置。
absolute:對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對位置。而其層疊通過z-index屬性定義。 
fixed:對象脫離正常文檔流，使用top，right，bottom，left等屬性以視窗為參考點進行定位，當出現捲軸時，對象不會隨著滾動。IE6不支援此屬性值。
瀏覽器支援:
IE瀏覽器支援此屬性。
Firefox瀏覽器支援此屬性。
Google瀏覽器支援此屬性。
opera瀏覽器支援此屬性。
注意:IE6不支援fixed屬性值。
繼承性:
沒有繼承性。
執行個體代碼:
執行個體一: 

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>position屬性-螞蟻部落</title><style type="text/css">.mytest{  width:200px;  height:100px;  border:1px solid blue;  position:static;  top:40px;}</style></head><body>  <div class="mytest">螞蟻部落歡迎您</div></body></html>

static是對象的預設定位值，無任何特殊定位，所以top屬性將會被忽略。
執行個體二: 

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>position屬性-螞蟻部落</title><style type="text/css">.parent{  width:300px;  height:300px;  border:1px solid #606;}.first{  width:100px;  height:100px;  border:1px solid blue;  position:relative;  top:30px;}.second{  width:100px;  height:100px;  border:1px solid #606;}</style></head><body><div class="parent">  <div class="first">我是第一個孩子</div>  <div class="second">我是第二個孩子</div></div></body></html>

first對象進行相對定位，它所相對的元素就是它自己本身的位置。而second的對象不會受到first對象的影響，依然會呆在它原來的地方。
執行個體三: 

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>position屬性-螞蟻部落</title><style type="text/css">.grandfather{  width:400px;  height:400px;  border:1px solid green;  position:relative;}.parent{  width:300px;  height:300px;  border:1px solid #606;}.first{  width:100px;  height:100px;  border:1px solid blue;  position:absolute;  bottom:50px;}.second{  width:100px;  height:100px;  border:1px solid #606;}</style></head><body><div class="grandfather">  <div class="parent">    <div class="first">我是第一個孩子</div>    <div class="second">我是第二個孩子</div>  </div></div></body></html>

以下代碼可以看出絕對位置對象的參考對象並非都是body或者它的最近得父物件，而是距離它最近的帶有position屬性並且屬性值不為static的父物件。下面的first對象就是以grandfather作為位移參考對象的。
執行個體四:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>密碼強度提示功能-螞蟻部落</title><style type="text/css">.grandfather{  width:400px;  height:400px;  border:1px solid green;  position:relative;}.parent{   width:300px;   height:300px;   border:1px solid #606;}.first{  width:100px;  height:100px;  border:1px solid blue;  position:fixed;  bottom:50px;}.second{  width:100px;  height:100px;  border:1px solid #606;}</style></head><body><div class="grandfather">  <div class="parent">    <div class="first">我是第一個孩子</div>    <div class="second">我是第二個孩子</div>  </div></div></body></html>

postion的fixed定位永遠是以body作為位移參考對象的。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=1417

更多內容可以參閱:http://www.softwhy.com/divcss/