Position

The   property is used in CSS and certain HTML elements. It selects alternative rules for positioning elements, designed to be useful for scripted animation effects. A positioned element is an element whose computed position property is,  , or. An absolutely positioned element is an element whose computed position property is  or. The,  ,  , and   properties specify the position of positioned elements.

Values

 * - Normal behavior. The,  ,  , and   properties do not apply.
 * - Lays out all elements as though the element were not positioned, and then adjusts the element's position, without changing the layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of  on ,  ,  ,  , and   elements is undefined.
 * - Does not leave space for the element. Instead, it is positioned at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, as they do not collapse with any other margins.
 * - Does not leave space for the element. Instead, it is positioned at a specified position relative to the screen's viewport and doesn't move when scrolled. When printing, it is positioned at that fixed position on every page.

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

For absolutely positioned elements, the,  ,  , and   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  values of   and   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 ) both   and   and leaving   unspecified (that is,  ). Likewise for,  , and.

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


 * If both  and   are specified (technically, not  ),   wins.
 * If both  and   are specified,   wins when   is   (English, horizontal Japanese, etc.) and   wins when   is   (Arabic, Hebrew, etc.).

HTML example:

TEXT

CSS example:

div { position:fixed; top:200px; right:200px; }