詳解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 等特性。

　　示例：

 

　　四、CSS定位：right

　　語法：

　　right : auto | length

　　取值：

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

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

　　說明：

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

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

　　示例：

 

　　五、CSS定位：bottom

　　語法：

　　bottom : auto | length

　　取值：

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

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

　　說明：

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

　　示例：

 

　　六、CSS定位：left

　　語法：

　　left : auto | length

　　取值：

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

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

　　說明：

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

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

　　示例：

 

 

 

        注：更多精彩文章請關注三聯網頁設計教程欄目。