position

position

計算機術語
position屬性規定元素的定位類型。所有主流浏覽器都支持position屬性。這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位,不過絕對或固定元素會生成一個塊級框,而不論該元素本身是什麼類型。相對定位元素會相對于它在正常流中的默認位置偏移。這個屬性定義建立元素布局所用的定位機制。Position定位技術是CSS布局中非常重要的概念。[1]
  • 中文名:定位
  • 外文名:
  • 所屬學科:
  • 英文名:position
  • 版本:CSS2
  • 常用值:absolute、fixed

取值

static

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

absolute

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

fixed

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

relative

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

屬性分析

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。

上一篇:上海外灘美術館

下一篇:negative

相關詞條

相關搜索

其它詞條