position

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

語法

{ position: sPosition }

可能的值

sPosition

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

static	預設值。物件沒有特殊位置，而是遵循 HTML 的版面配置規則。
absolute	使用 top 和 left 屬性將物件放置在相對於父元素的位置，或相對於 body 物件的位置 (如果其父物件未定位)。
fixed	物件放置在相對於包含內容之瀏覽器視窗的位置。
relative	物件是根據一般流程來放置，然後以 top 和 left 屬性來位移。

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

備註

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

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

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

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

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

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

範例

此範例使用 position 屬性的 absolute 、 static 和 relative 值，來變更文字的位置：

<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