CSS:position

From MDC

« CSS « CSS Reference

[edit] Summary

The position property chooses alternative rules for positioning elements, designed to be useful for scripted animation effects.

• Initial value: static
• Applies to: all elements
• Inherited: no
• Media: visual
• Computed value: as specified

A positioned element is an element whose computed position property is relative, absolute, or fixed.

An absolutely positioned element is an element whose computed position property is absolute or fixed.

The top, right, bottom, and left properties specify the position of positioned elements.

[edit] Syntax

position: static | relative | absolute | fixed | inherit

[edit] Values

static 

Normal behavior.

relative 

Lay out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned).

absolute 

Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the initial containing block.

fixed 

Do not leave space for the element. Instead, position it at a specified position relative to the viewport, which does not scroll when the page is scrolled. (Or, when printing, position it at that fixed position on every page.)

[edit] Examples

[edit] Notes

For relatively positioned elements, the top or bottom property specifies the vertical offset from the normal position and the left or right property specifies the horizontal offset.

For absolutely positioned elements, the top, right, bottom, and left properties specify offsets from the edge of the element's containing block (what the element is positioned relative to). The margin of the element is then positioned inside these offsets.

Most of the time, absolutely positioned elements have auto values of height and width computed to fit the contents of the element. However, non-replaced absolutely positioned elements can be made to fill the available space by specifying (as other than auto) both top and bottom and leaving height unspecified (that is, auto). Likewise for left, right, and width.

Except for the case just described of absolutely positioned elements filling the available space:

• If both top and bottom are specified (technically, not auto), top wins.
• If both left and right are specified, left wins when direction is ltr (English, horizontal Japanese, etc.) and right wins when direction is rtl (Arabic, Hebrew, etc.).

[edit] Specifications

• CSS 2.1

[edit] Browser compatibility

[edit] See also

display, float, top, right, bottom, left