標籤: 暫無標籤

1 position -基本信息

  漢語釋意:位置
  bottom right top z-indexleft
  position版本:CSS2 兼容性:IE4+ NS4+ 繼承性:無
  語法:
  position : static | absolute | fixed | relative

2 position -取值

static

  默認值。無特殊定位,對象遵循HTML定位規則absolute

  將對象從文檔流中拖出,使用 left , right , top , bottom 等屬性相對於其最接近的一個最有定位設置的父對象進行絕對定位。如果不存在這樣的父對象,則依據 body 對象。而其層疊通過 z-index 屬性定義 fixed

  未支持。對象定位遵從絕對(absolute)方式。但是要遵守一些規範relative

  對象不可層疊,但將依據 left , right , top , bottom 等屬性在正常文檔流中偏移位置

3 position -屬性分析

  1. relative
  relative屬性相對比較簡單,我們要搞清它是相對哪個對象來進行偏移的。答案是它本身的位置。在上面的代碼中,sub1和sub2是同級關係,如果設定sub1一個relative屬性,比如設置如下CSS代碼:
  #sub1
  {
  position: relative;
  padding: 5px;
  top: 5px;
  left: 5px;
  }
  我們可以這樣理解,如果不設置relative屬性,sub1的位置按照正常的文檔流,它應該處於某個位置。但當設置sub1為的position為relative后,將根據top,right,bottom,left的值按照它理應所在的位置進行偏移,relative的「相對的」意思也正體現於此。
  對於此,您只需要記住,sub1如果不設置relative時它應該在哪裡,一旦設置后就按照它理應在的位置進行偏移。
  隨後的問題是,sub2的位置又在哪裡呢?答案是它原來在哪裡,現在就在哪裡,它的位置不會因為sub1增加了position的屬性而發生改變。
  如果此時把sub2的position也設置為relative,會發生什麼現象?此時依然和sub1一樣,按照它原來應有的位置進行偏移。
  注意relative的偏移是基於對象的margin的左上側的。
  2. absolute
  這個屬性總是有人給出誤導。說當position屬性設為absolute后,總是按照瀏覽器窗口來進行定位的,這其實是錯誤的。實際上,這是fixed屬性的特點。
  當sub1的position設置為absolute后,其到底以誰為對象進行偏移呢?這裡分為兩種情況:
  (1)當sub1的父對象(或曾祖父,只要是父級對象)parent也設置了position屬性,且position的屬性值為absolute或者relative時,也就是說,不是默認值的情況,此時sub1按照這個parent來進行定位。
  注意,對象雖然確定好了,但有些細節需要您的注意,那就是我們到底以parent的哪個定位點來進行定位呢?如果parent設定了margin,border,padding等屬性,那麼這個定位點將忽略padding,將會從padding開始的地方(即只從padding的左上角開始)進行定位,這與我們會想當然的以為會以margin的左上端開始定位的想法是不同的。接下來的問題是,sub2的位置到哪裡去了呢?由於當position設置為absolute后,會導致sub1溢出正常的文檔流,就像它不屬於parent一樣,它漂浮了起來,在DreamWeaver中把它稱為「層」,其實意思是一樣的。此時sub2將獲得sub1的位置,它的文檔流不再基於sub1,而是直接從parent開始。
  (2)如果sub1不存在一個有著position屬性的父對象,那麼那就會以body為定位對象,按照瀏覽器的窗口進行定位,這個比較容易理解。
  3. fixed
  fixed是特殊的absolute,即fixed總是以body為定位對象的,按照瀏覽器的窗口進行定位。
  4. static
  position的默認值,一般不設置position屬性時,會按照正常的文檔流進行排列。說明

  檢索對象的定位方式。
  設置此屬性值為 absolute 會將對象拖離出正常的文檔流絕對定位而不考慮它周圍內容的布局。假如其他具有不同 z-index 屬性的對象已經佔據了給定的位置,他們之間不會相互影響,而會在同一位置層疊。此時對象不具有外補丁( margin ),但仍有內補丁( padding )和邊框( border )。
  [以上說此時對象不具有外補丁( margin ),但仍有內補丁( padding )和邊框( border )。感覺不是很正確,通過測試,發現無論是IE6或IE7的標準模式或Qurik模式,或者是其他如Firfox3.05版本,或者其他瀏覽器,應用了偏移屬性的元素仍具有margin屬性,只是因為分層的原因,該margin屬性不能跨層影響其他層元素而已。]
  要激活對象的絕對(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 }
  //運行下面代碼可看見效果差別:
  
下一篇[product]

相關評論

同義詞:暫無同義詞