詳解CSS的定位語法應用

一、CSS定位：position

　　語法：

　　position : static | absolute | fixed | relative

　　取值：🀜. 預設值。無特殊定位，物件遵守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

: 　　㟜〜㟜〜〜: 　㜀　取值：

　　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; }

　　三頭

　　取值：

　　auto :預設值.無特殊定位，依HTML定位規則在文件流程中分配。

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

　　說明：

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

　　此屬性僅在物件的定位( position )屬性被設定時可用。否則，此屬性設定會被忽略。此屬性對於 currentStyle 物件而言是唯讀的。對於其他物件而言是可讀寫的。對應的腳本特性為 top 。其值為一字串，所以不可用於腳本(Scripts)中的計算。請使用 style 物件的 posTop ， pixelTop 等運行時特性，以及物件的offsetTop 等特性。

　　範例：

以下是引用片段：

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

　　div right

　　文法：

　　right : auto | length

　　取值：

　　auto  :預設值。無特殊定位，依HTML定位規則在文件流程中分配。

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

　　說明：

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

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

　　範例：

以下是引用片段：
　　div { position: absolute; right: 1in; } 
　　〜〜樣🜀: top:-36p; top:36pboto:divtop:36p」top:3:36pbot-36pbot-36pbot-3:3pbot-3pbot-3pbot-3pbot-3pbot);

　　語法：

　　bottom : auto | length

　　取值：

　　auto :預設值。無特殊定位，依HTML定位規則在文件流程中分配。

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

　　說明：

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

　　範例：

以下是引用片段：

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

　　div" position:relative;

　　文法：

left : auto | length

　　取值：

　　auto  :預設值。無特殊定位，依HTML定位規則在文件流程中分配。

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

　　說明：

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

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

　　範例：

以下是引用片段：

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

　　div的內容，更多相關文章請關注PHP中文網（www.php.cn）！