position

Support Key: [CSS2|CSS2.1] [IE4|N4|O4|S1]
Other Classification Properties
display
visibility
float
clear
= Index DOT Css by Brian Wilson =
  Main Index | Property Index | CSS Support History | Browser History  



   Quick Statistics   
Default Value:
   static
Applicable Elements:
All (except generated content)
Inherit From Parent:
No
Applicable Media:
Visual
HTML Equivalent:
NA
Official Docs:
CSS2: Sect. 9.3.1, CSS2.1: Sect 9.3.1
What is it?
This property determines whether normal, relative or absolute positioning methods are used to render the current element box.

Allowed Values
inherit
[CSS2|CSS2.1] [N6|O4|S1]
Type: Explicit
Description:
Explicitly sets the value of this property to that of the parent.
static
[CSS2|CSS2.1] [IE4|N4|O4|S1]
Type: Explicit
Description:
This is the default positioning scheme, where elements are rendered in order, as they appear in the document flow. The 'top', 'left', 'right' and 'bottom' properties have no effect if this value is set.
relative
[CSS2|CSS2.1] [IE4|N4|O4|S1]
Type: Explicit
Description:
The element's normal document flow position is calculated as if the element had a 'position' value of 'static'. It is then offset from this position according to the 'top' and 'left' properties. Any elements that come after this element will be laid out as if the element had not been offset (a phantom height and width for the element is reserved in the normal document flow.)
absolute
[CSS2|CSS2.1] [IE4|N4|O4|S1]
Type: Explicit
Description:
This specifies that the element box be absolutely positioned using the 'top', 'left', 'right' and 'bottom' properties. These values use the element box's containing block as origin. Absolutely positioned elements do NOT exist in the normal document flow like relatively positioned elements are - elements that follow will flow as if the absolutely positioned element does not exist.
fixed
[CSS2|CSS2.1] [N6.1|O4|S1]
Type: Explicit
Description:
This value behaves like 'absolute' in all respects, but additionally, the positioned element box is fixed with respect to a reference point. In scrolling media, it is in reference to some fixed point on the screen; in paged media (printing) it will be in reference to a point on the page. The positioned element will not move with respect to that stationary point (eg, it will not moved when, say, the screen is scrolled.)
Example
Ext/Doc: h2 { display: block; position: absolute;
top: 20px; right: 50px; bottom: 20px; left: 50px }
In-Line:  <h2 STYLE="display: block; position: absolute;
top: 20px; right: 50px; bottom: 20px; left: 50px">text</h2>
Notes Browser Peculiarities

Boring Copyright Stuff....