The CSS reference

"position" - css property (v. css 2)

The 'position' and 'float'
properties determine which of the CSS 2.1 positioning algorithms is used to calculate the position of a box.

Initial value: static

The property is not inherited

HTML usage: all elements

Browsers that support the position - property :

Possible position values:

value

Comments

CSS

static

The box is a normal box,
laid out according to the normal flow. The 'top'
, 'right'
, 'bottom'
,
and 'left'
properties do not apply.

2

relative

The box's position is calculated according to the normal flow.
The effect on table-row-group, table-header-group, table-footer-group,
table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

2

absolute

The box's position (and possibly size) is specified with
the 'top'
, 'right'
, 'bottom'
, and 'left'
properties.
These properties specify offsets with respect to the box's containing block.
Absolutely positioned boxes are taken out of the normal flow.

2

fixed

The box's position is calculated according to the 'absolute' model,
but in addition, the box is fixed with respect to some reference.
Normally the box is fixed with respect to the viewport
(a window or other viewing area on the screen) and does not move when scrolled.

2

inherit

Will inherit the value from parent specification.

2

The three properties that affect box generation and layout interact as follows:

display value

position value

float value

Comments

'none'

Based on display value UA should ignore this

Based on display value UA should ignore this

The element generates no box

Based on position value: se table below.

'absolute' or 'fixed'

Based on position computed value to be 'none'

The position of the box will be
determined by the 'top'
, 'right'
, 'bottom'
and 'left'
properties and the box's containing block.

Computed value: se table below.

'static' or 'relative'

other than 'none'

The box is floated.

Computed value: se table below.

The element is the root element.

Apply as specified.

All other cases.

Computed value based on specified value for display property under certain conditions:

Javascript access:

// To SET values ([o] is the target object)
[o].style.position="position value"// To GET values you must first get the computed style object// To get that object in IE or Opera:
var cStyle=[o].currentStyle;
// To get that object in Firefox, Chrome or Safari (w3c-type):
var cStyle=window.getComputedStyle([o],null)
// To GET the property value:;
var value=cStyle.position;