position Attribute | position Property

Retrieves the type of positioning used for the object.

Syntax

HTML	{ position: sPosition }
Scripting	[ sPosition = ] object.style.position

Possible Values

sPosition

String that specifies one of the following values: static Object has no special positioning; it follows the layout rules of HTML. absolute Object is positioned relative to parent element's position—or to the BODY object if its parent element is not positioned—using the top and left properties. relative Object is positioned according to the normal flow, and then offset by the top and left properties.

The property is read-only with a default value of static; the cascading style sheets (CSS) attribute 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, nor does the positioned object 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 attribute or property. Absolutely positioned objects do not have margins, but they do have borders and padding.

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

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

For an overview about how to use dynamic positioning, see Positioning.

See the Applies To section for elements that can be relatively and absolutely positioned.

Example

This examples uses the position property's absolute, static, and relative values to change the position of the text.

Sample Code

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

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

Applies To

[ Object Name ] Platform Version Win16: Win32: Mac: Unix: WinCE: Version data is listed when the mouse hovers over a link, or the link has focus.

A, ADDRESS, APPLET, B, BDO, BIG, BLOCKQUOTE, BUTTON, CENTER, CITE, CODE, custom, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, 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, ISINDEX, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OBJECT, OL, P, PRE, RUBY, runtimeStyle, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TABLE, TD, TEXTAREA, TH, TR, TT, U, UL, VAR, XMP