6 out of 9 rated this helpful Rate this topic

position Attribute | position Property

.NET Framework 3.0

Gets or sets the type of positioning used for the object.

Syntax

CSS { position : sPosition }

Scripting [ sPosition = ] object.style.position

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

Possible Values

sPosition String that specifies or receives one of the following values.
static
Default. 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.
fixed
Windows Internet Explorer 7 and later. Object is positioned relative to the viewport containing the content.

The property is read/write for all objects except the following, for which it is read-only: currentStyle. The property has a default value of static. The Cascading Style Sheets (CSS) attribute is not inherited.

DHTML expressions can be used in place of the preceding value(s). As of Internet Explorer 8, expressions are supported in IE7 Standards mode and IE5 (Quirks) mode only. For more information, see About Dynamic Properties and Defining Document Compatibility.

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.

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.

Input from pointing devices, such as the mouse, does not penetrate through overlapping elements even if the elements are not visible. This is also true for positioned elements with a negative z-index unless:

The parent is a scrolling container (that is, its overflow property is set to auto or scroll).

The parent is positioned (that is, its position property is set to absolute or relative).

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.
Copy
<p>The superscript in this name 
    <span style="position: relative; 
    top: -3px">xyz</span> is &quot;xyz&quot;.</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 is not shown.
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 About Element Positioning.
See the Applies To section for elements that can be positioned.
Internet Explorer 7 and later. Fixed positioning is only supported for pages using a strict <!DOCTYPE> directive.

Example

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

Copy


<style type="text/css">
.pitem {
	position: static;
}
</style>
<script type="text/javascript">
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 <b>span</b> 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">

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/position.htm

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, CSSStyleDeclaration, currentStyle, CUSTOM, DD, defaults, DFN, DIR, 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, 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, CSSCurrentStyleDeclaration Constructor, CSSRuleStyleDeclaration Constructor, CSSStyleDeclaration Constructor

Did you find this helpful? Yes No

Not accurate

Not enough depth

Need more code examples

(1500 characters remaining)

Community Content Add

FAQ