CSS Attributes Index   Positioning Properties

---

Sets or retrieves the type of positioning used for the object.

CSS	{ position: 'static' | 'absolute' | 'relative' }
Script	[ sPosition = ] object.style.position

static	No special positioning; the object obeys the layout rules of HTML.
absolute	The object is positioned relative to the next positioned parent — or to the BODY if there isn't one — using the top and left properties.
relative	The object is positioned according to the normal flow and then offset by the top and left properties.

The property is read/write with a default value of static; this attribute is not inherited.

Setting the property to absolute pulls the object out of the "flow" of the document and positions it irrespective 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.

Text and objects that follow a relatively positioned object occupy their own space and do not overlap the natural space for the positioned object. Contrast this with an absolutely positioned object, where subsequent text and objects occupy what would have been the natural space for the positioned object before it was pulled out of the flow.

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

See Dynamic Positioning for an overview on how to position objects dynamically.