Extensible HyperText Markup Language

XHTML.com recommends: PSD to HTML Slicing Service

position

Definition

The position property specifies the type of scheme used to position elements on a Web page. By default, elements are rendered in Web browsers in a flow pattern, where one element is rendered after another, in the order in which they appear in the document. Block elements such as p, div, table, blockquote, etc., are rendered as rectangles that take up 100% of the width of the parent element. Therefore, consecutive block elements are rendered one beneath the other. Inline elements such as em, strong, span, q, abbr, etc., are rendered as rectangles that take up only the width consumed by the data inside them. Therefore, consecutive inline elements are rendered next to each other, or next to text.

The position property, in conjunction with top, right, bottom and left properties, can be used to position elements outside this normal flow.

Example

  1. p.wordmark {
  2. position: fixed;
  3. bottom: 10px;
  4. right: 10px;
  5. }

Characteristics

Possible values

static
Normal layout flow.
relative
The element remains in the normal layout flow but the the element's position can be specified by top, right, bottom and left properties relative to the element's normal flow position in the document.
absolute

The element is taken out of the normal layout flow so that any elements that follow are laid out as though the absolutely-positioned element is not there. The following illustrations compare the layout of paragraphs when the layout is normal (left illustration) and when the second paragraph containing only an image is absolutely positioned so that the third paragraph is laid out as if the second paragraph is not there (right illustration).

Illustration comparing two layouts. The layout on the left has three paragraph positioned one after the other. The layout on the right, the second and third paragraphs are overlapped and are positioned after the first paragraph.

The element's position can be specified by top, right, bottom and left properties relative to the parent element.

fixed
The element is taken out of the normal layout flow, just like absolute, except the element is fixed to a position in the browser's window and so will not scroll with the rest of the page content. The element's position can be specified by top, right, bottom and left properties relative to the browser's window.
inherit
Use the same computed value as the parent element for this property.

Default value

static

Applies to

All elements

Inherited

No

See also