Position

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

CSS2 recommends that if the value of 'fixed' is used, it should be specified on a case-by-case basis depending on the media.
Page-breaks may not occur inside boxes that are absolutely positioned.
Before its inclusion in CSS2, this property was first proposed in the W3C Working Draft "Positioning HTML Elements with Cascading Style Sheets" (8/19/97, http://www.w3.org/TR/WD-positioning)

Browser Peculiarities

Internet Explorer

4.0:
- Absolute positioning applied to hyperlinks does not position the element, and the hyperlink is unusable.
- Absolute positioning does not work for inline elements, list structures OL/UL/DL, LI/DT/DD and table cells. (In IE5 it works for these elements.)
4.0+:
- Relative positioning does not apply to table cells (TH/TD.)
- The 'top' and 'left' properties must also be specified if Absolute positioning is used. Otherwise, element placement may overlap content in unpredictable ways.
Netscape

4.x:
- Relative positioning does not apply to LI/DT/DD, form fields, IMG, TABLE or table cells (TH/TD.)
- Absolute positioning does not apply to LI/DT/DD, or form fields.
- Applying Absolute positioning to the TABLE element strips all the text content out of the table and serializes it, rendering it at the specified position with no formatting.
- Applying this "position: absolute" to hyperlink elements positions the element, but the hyperlink is unusable. If "position: relative" is used, the active/clickable area is the region where the hyperlink would have been displayed if the "relative" value had not been assigned.
- Absolute positioning values are computed relative to the BODY element, not an element's parent element.
- The 'top' and 'left' properties must also be specified if Absolute positioning is used. Otherwise, element placement may overlap content in unpredictable ways.
- Absolute positioning does not appear to apply directly to IMG elements.
- Absolute positioning appears to cause random rendering bugs. In my test page with dozens of positioned elements, positioned elements may or may not appear (it seems random) upon refresh.
- Form elements are always rendered on top of absolutely or relatively positioned elements, regardless of where they are located in the document tree or any 'z-index' value specified.
- If a form field is contained within an element that is absolutely or relatively positioned, it disappears.
- If a relative or absolutely positioned element is nested inside another relative or absolutely positioned element, any further application of CSS is broken - no properties will be applied.