B.90. position

This property sets the method used to position an element on the page.

Inherited: No

See also: Section B.20bottom, Section B.55left, Section B.93right, Section B.118top, Section B.131z-index

B.90.1. Value

This property may be set to any of the following constant values:

absolute

The element can be precisely positioned within the positioning context in which it resides. In other words, a (top,left) position of (0,0) will place the element against the top-left corner of the nearest ancestor that has a position setting other than static, or the body element.

Absolute-positioned elements do not occupy any space in the normal document flow.

fixed

This setting lets you position the element just as with absolute, but when the page is scrolled, the element maintains its position in the window instead of scrolling with the rest of the page.

relative

The element can be positioned relative to where it would appear if it were positioned normally with static. In other words, a (top,left) position of (50,-30) will place the element 50 pixels below and 30 pixels to the left of where it would appear if its position were left up to the browser.

Relative-positioned elements still occupy the space they would be assigned if they were not positioned to begin with. This may sound like a pain, but it comes in handy in some common page layout situations.

One common use of relative is to let an element act as a positioning context for one or more absolute positioned child elements, without moving it from its normal place in the document flow.

static

The element is laid out according to normal document flow. The bottom, left, right, and top properties have no effect.

Initial value: static

B.90.2. Compatibility

CSS Version: 2

This property works in all CSS-compatible browsers; however, the fixed property is only correctly supported by Mozilla (including Netscape 6+), Opera 7, and Internet Explorer 5 (Macintosh) browsers. Internet Explorer for Windows (up to and including version 6 in standards-compliant mode) treats fixed exactly like absolute.

B.90.3. Example

This style rule places the element with ID logo 30 pixels from the top and right edges of the browser window (assuming the element is in the body's positioning context), and keeps it there even when the user scrolls the document:

#logo {
  position: fixed;
  top: 30px;
  right: 30px;
}

The chapters of this book that deal with page layout also contain plenty of examples with which you may experiment.