共用方式為


position

設定用於物件的位置類型。

語法

{ position: sPosition }

可能的值

sPosition

指定或接收下列其中一個值的字串:

static

預設值。物件沒有特殊位置,而是遵循 HTML 的版面配置規則。

absolute

使用 topleft 屬性將物件放置在相對於父元素的位置,或相對於 body 物件的位置 (如果其父物件未定位)。

fixed

物件放置在相對於包含內容之瀏覽器視窗的位置。

relative

物件是根據一般流程來放置,然後以 topleft 屬性來位移。

此屬性的預設值為 static。未繼承階層式樣式表屬性。

備註

將該屬性設為 absolute 會將物件從文件的「流程」抽出,並在不考慮周圍物件的版面配置下放置該物件。如果其他物件已經佔據指定位置,它們不會影響定位物件,且定位物件也不會影響它們。但是所有物件會在相同位置繪製,導致物件重疊。此重疊是使用 z-index 屬性來控制。以絕對方式定位的物件沒有邊界,但有框線和邊框間距。

若要對物件啟用絕對位置,除了將 position 屬性設為 absolute 外,必須至少指定 topbottomleftright 屬性的其中一個。否則,這些位置屬性會使用預設值 absolute,根據 HTML 的版面配置規則,這會導致物件緊接在前面的元素之後呈現。

將該屬性設為 relative 會將物件放在文件的自然 HTML 流程中,並根據前面的內容位移物件的位置。下列語法顯示如何建立上標文字,方法是將文字放在 SPAN 元素中,該元素的位置相對於段落中其餘的文字:

<p>The superscript in this name
    <span style="position:relative; top:-3px">xyz </span> is "xyz".</p>

接在以相對方式定位之物件後面的文字和物件會佔據其自己的空間,且不會與定位物件的自然空間重疊。相反地,接在以絕對方式定位之物件後面的文字和物件,會佔據從流程抽出定位物件前原本為定位物件之自然空間的空間。將以絕對方式定位的物件放在超出視窗可檢視區域外的位置,會導致捲軸出現。如果將以相對方式定位的物件放在超出可檢視區域外的位置,捲軸並不會出現。

內容的大小決定具有版面配置之物件的大小。例如,設定 DIV 物件的 heightposition 屬性會為該物件提供版面配置。DIV 物件的內容決定大小。在此情況下,內容決定 width 的大小。

範例

此範例使用 position 屬性的 absolutestaticrelative 值,來變更文字的位置:

<style>
.pitem {position: static}
</style>

<script>
function fnAbsolute(){
   ospan.style.position="absolute";
}
function fnRelative(){
   ospan.style.position="relative";
}
function fnStatic(){
   ospan.style.position="static";
}
</script>

<p>
<span id=ospan class="pitem">This is a span in a paragraph of text.</span>
This is a paragraph of text.</p>
<input onclick="fnRelative()" type=button value ="Relative">
<input onclick="fnAbsolute()" type=button value ="Absolute">
<input onclick="fnStatic()" type=button value ="Static">

標準資訊

此屬性是在階層式樣式表 (CSS) 層級 2 (CSS2) (英文) 中定義。

適用於

A、ADDRESS、APPLET、B、BDO、BIG、BLOCKQUOTE、BUTTON、CENTER、CITE、CODE、CUSTOM、DD、DEFAULTS、DFN、DIV、DL、DT、EM、EMBED、FIELDSET、FONT、FORM、HN、HR、I、IFRAME、IMG、INPUT TYPE=BUTTON、INPUT TYPE=CHECKBOX、INPUT TYPE=FILE、INPUT TYPE=IMAGE、INPUT TYPE=PASSWORD、INPUT TYPE=RADIO、INPUT TYPE=RESET、INPUT TYPE=SUBMIT、INPUT TYPE=TEXT、LI、OBJECT、OL、P、RUBY、S、SELECT、SPAN、SUB、TABLE、TD、TH、TR、TT、U、UL、VAR、XMP

請參閱

概念

top

bottom

left

right

height

width