position

Sets the type of positioning used for the object.

Syntax

{ position: sPosition }

Possible values

sPosition

String that specifies or receives one of the following values:

The property has a default value of static. The cascading style sheet property is not inherited.

Remarks

Setting the property to absolute pulls the object out of the "flow" of the document and positions it regardless of the layout of surrounding objects. If other objects already occupy the given position, they do not affect the positioned object, and the positioned object does not affect them. Instead, all objects are drawn at the same place, causing the objects to overlap. This overlap is controlled by using the z-index property. Absolutely positioned objects do not have margins, but they do have borders and padding.

To enable absolute positioning on an object, you must specify at least one of the top, bottom, left, or right properties, in addition to setting the position property to absolute. Otherwise, these positioning properties use their default value of absolute, which causes the object to render immediately after the preceding elements, according to the layout rules of HTML.

Setting the property to relative places the object in the natural HTML flow of the document, but offsets the position of the object based on the preceding content. The following syntax shows how to create superscript text by placing the text in a SPAN element that is positioned relative to the remaining text in the paragraph:

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

Text and objects that follow a relatively positioned object occupy their own space and do not overlap the natural space for the positioned object. In contrast, text and objects that follow an absolutely positioned object occupy what would have been the natural space for the positioned object before it was pulled out of the flow. Placing an absolutely positioned object beyond the viewable area of the window causes a scroll bar to appear. When relatively positioned objects are placed beyond the viewable area, a scroll bar does not appear.

The size of the content determines the size of objects that have layout. For example, setting the height and position properties on a DIV object gives it layout. The content of the DIV object determines the size. In this case, the content determines the size of the width.

Example

This example uses the absolute, static, and relative values of the position property to change the position of the text:

<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">

Standards information

This property is defined in Cascading Style Sheets (CSS), Level 2 (CSS2) .

Applies to

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

See also

Concepts

top
bottom
left
right
height
width

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.