詳解CSS的定位文法應用

css|詳解|文法

　　一、CSS定位：position

　　文法：

　　position : static | absolute | fixed | relative 

　　取值：

　　static  : 預設值。無特殊定位，對象遵循HTML定位規則 
　　absolute  : 將對象從文檔流中拖出，使用 left ， right ， top ， bottom 等屬性相對於其最接近的一個最有定位設定的父物件進行絕對位置。如果不存在這樣的父物件，則依據 body 對象。而其層疊通過 z-index 屬性定義 
　　fixed  : 未支援。對象定位遵從絕對(absolute)方式。但是要遵守一些規範 
　　relative  : 對象不可層疊，但將依據 left ， right ， top ， bottom 等屬性在正常文檔流中位移位置 

　　說明：

　　檢索對象的定位方式。

　　設定此屬性值為 absolute 會將對象拖離出正常的文檔流絕對位置而不考慮它周圍內容的布局。假如其他具有不同 z-index 屬性的對象已經佔據了給定的位置，他們之間不會相互影響，而會在同一位置層疊。此時對象不具有外補丁( margin )，但仍有內補丁( padding )和邊框( border )。
要啟用物件的絕對(absolute)定位，必須指定 left ， right ， top ， bottom 屬性中的至少一個，並且設定此屬性值為 absolute 。否則上述屬性會使用他們的預設值 auto ，這將導致對象遵從正常的HTML布局規則，在前一個對象之後立即被呈遞。

　　設定此屬性值為 relative 會保持對象在正常的HTML流中，但是它的位置可以根據它的前一個對象進行位移。在相對(relative)定位對象之後的文本或對象佔有他們自己的空間而不會覆蓋被定位對象的自然空間。與此不同的，在絕對(absolute)定位對象之後的文本或對象在被定位對象被拖離正常文檔流之前會佔有它的自然空間。放置絕對(absolute)定位對象在可視地區之外會導致捲軸出現。而放置相對(relative)定位對象在可視地區之外，捲軸不會出現。

　　內容的尺寸會根據布局確定對象的尺寸。例如，設定一個 div 對象的 height 和 position 屬性，則 div 對象的內容將決定它的寬度( width )。

　　此屬性對於 currentStyle 對象而言是唯讀。對於其他對象而言是可讀寫的。對應的指令碼特性為 position 。 

　　樣本：

　　div { position:relative; top:-3px } 

　　二、CSS定位：Z-index

　　文法：

　　z-index : auto | number 

　　取值：

　　auto  : 預設值。遵從其父物件的定位 
　　number  : 無單位的整數值。可為負數 

　　說明：

　　檢索或設定對象的層疊順序。
　　較大 number 值的對象會覆蓋在較小 number 值的對象之上。如兩個絕對位置對象的此屬性具有同樣的 number 值，那麼將依據它們在HTML文檔中聲明的順序層疊。對於未指定此屬性的絕對位置對象，此屬性的 number 值為正數的對象會在其之上，而 number 值為負數的對象在其之下。設定參數為 null 可以移除此屬性。

　　此屬性僅僅作用於 position 屬性值為 relative 或 absolute 的對象。這個屬性不會作用於視窗控制項，如 select 對象。在IE5.5+中， iframe 對象開始支援此屬性。而在之前的瀏覽器版本中， iframe 對象是視窗控制項，會忽略此屬性。此屬性對於 currentStyle 對象而言是唯讀。對於其他對象而言是可讀寫的。對應的指令碼特性為 zIndex 。 

　　樣本：

　　div { position:absolute; z-index:3; width:6px; } 

　　三、CSS定位：top

　　文法：

　　top : auto | length 

　　取值：

　　auto  : 預設值。無特殊定位，根據HTML定位規則在文檔流中分配 
　　length  : 由浮點數字和單位標識符組成的長度值 | 百分數。必須定義 position 屬性值為 absolute 或者 relative 此取值方可生效。請參閱 長度單位  

　　說明：

　　檢索或設定對象與其最近一個具有定位設定的父物件頂邊相關的位置。
　　此屬性僅僅在對象的定位( position )屬性被設定時可用。否則，此屬性設定會被忽略。此屬性對於 currentStyle 對象而言是唯讀。對於其他對象而言是可讀寫的。對應的指令碼特性為 top 。其值為一字串，所以不可用於指令碼(Scripts)中的計算。請使用 style 對象的 posTop ， pixelTop 等運行時特性，以及對象的offsetTop 等特性。 

　　樣本：

　　div { position: absolute; top: 1in; }
　　div { position:relative; top:-3px; left:6px; } 

　　四、CSS定位：right

　　文法：

　　right : auto | length 

　　取值：

　　auto  : 預設值。無特殊定位，根據HTML定位規則在文檔流中分配 
　　length  : 由浮點數字和單位標識符組成的長度值 | 百分數。必須定義 position 屬性值為 absolute 或者 relative 此取值方可生效。請參閱 長度單位  

　　說明：

　　檢索或設定對象與其最近一個具有定位設定的父物件右邊相關的位置。

　　此屬性僅僅在對象的定位( position )屬性被設定時可用。否則，此屬性設定會被忽略。此屬性對於 currentStyle 對象而言是唯讀。對於其他對象而言是可讀寫的。對應的指令碼特性為 right 。其值為一字串，所以不可用於指令碼(Scripts)中的計算。請使用 style 對象的 posRight ， pixelRight 等運行時特性。 

　　樣本：

　　div { position: absolute; right: 1in; }
　　div { position:relative; top:-3px; right:6px; }

　　五、CSS定位：bottom

　　文法：

　　bottom : auto | length 

　　取值：

　　auto : 預設值。無特殊定位，根據HTML定位規則在文檔流中分配 

　　length : 由浮點數字和單位標識符組成的長度值 | 百分數。必須定義 position 屬性值為 absolute 或者 relative 此取值方可生效。請參閱長度單位

　　說明：

　　檢索或設定對象與其最近一個具有定位設定的父物件底邊相關的位置。此屬性僅僅在對象的定位( position )屬性被設定時可用。否則，此屬性設定會被忽略。此屬性對於 currentStyle 對象而言是唯讀。對於其他對象而言是可讀寫的。對應的指令碼特性為 bottom 。其值為一字串，所以不可用於指令碼(Scripts)中的計算。請使用 style 對象的 posBottom ， pixelBottom 等運行時特性。 

　　樣本：

　　div { position: absolute; bottom: 1in; } 

　　div { position:relative; bottom:6px; }

　　六、CSS定位：left

　　文法：

　　left : auto | length 

　　取值：

　　auto  :預設值。無特殊定位，根據HTML定位規則在文檔流中分配 
　　length  :由浮點數字和單位標識符組成的長度值 | 百分數。必須定義 position 屬性值為 absolute 或者 relative 此取值方可生效。請參閱長度單位 

　　說明：

　　檢索或設定對象與其最近一個具有定位設定的父物件左邊相關的位置。

　　此屬性僅僅在對象的定位( position )屬性被設定時可用。否則，此屬性設定會被忽略。此屬性對於 currentStyle 對象而言是唯讀。對於其他對象而言是可讀寫的。對應的指令碼特性為 left 。其值為一字串，所以不可用於指令碼(Scripts)中的計算。請使用 style 對象的 posLeft ， pixelLeft 等運行時特性，以及對象的offsetLeft 等特性。 

　　樣本：

　　div { position: absolute; left: 1in; }
　　div { position:relative; top:-3px; left:6px; }