詳解CSS的定位文法應用

來源:互聯網
上載者:User
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; } 



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。