<position>

Summary

The <position> CSS data type denotes a coordinate in a 2D space used to set a location relative to a box.

A specific coordinate can be given by a two keywords with specific offsets. A keyword represents one edge of the element's box or the center line between two edges: left, right, top, bottom or center (which represents either the center between the left and right edges, or the center between the top or bottom edges, depending on the context).

An offset can be either a relative value, expressed as a <percentage>, or an absolute <length> value. Positive values are offset towards the right or the bottom, whichever is suitable. Negative values are offset in the other directions.

The final position described by the <position> value does not need to be inside the element's box.

If only a single offset is specified, it specifies the x-coordinate. When only a single offset or keyword is specified, and the value for the other axis is assumed to be "center".

Interpolation

Both the abscissa and ordinate values are interpolated independently. As the speed is defined by the same <timing-function> for both, the point will move following a line.

Values

/* 1-value syntax */
keyword                  /* The corresponding edge, the other direction is corresponding to center, the middle of the edge */
<length> or <percentage> /* The position on the x-axis, 50% for the y-axis */

/* 2-value syntax */
keyword keyword          /* A keyword for each direction, the order is irrelevant */
keyword value            /* The value is the offset for the edge defined by the keyword */

Formal syntax

[ [ left | center | right | top | bottom | <percentage> | <length> ] |
                  [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] |
                  [ center | [ left | right ] [ <percentage> | <length> ]? ] && 
                  [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
                ]

Specifications

Specification	Status	Comment
CSS Values and Units Module Level 3 The definition of '<position>' in that specification.	Candidate Recommendation	Relists links to both definitions with the requirement to be coherent: if CSS Backgrounds and Borders Module Level 3 is supported, its definition of `<position>` must be used too.
CSS Backgrounds and Borders Module Level 3 The definition of '<position>' in that specification.	Candidate Recommendation	Defines `<position>` explicitly and extends it to support offsets from any edge.
CSS Level 2 (Revision 1) The definition of '<position>' in that specification.	Recommendation	Allows combination of a keyword with a `<length>`, or `<percentage>` value.
CSS Level 1 The definition of '<position>' in that specification.	Recommendation	Defines `<position>` anonymously as the value of `background-position`.

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	1.0 (1.7 or earlier)	4.0	3.5	1.0 (85)
Combination of a keyword and a `<length>` or `<percentage>`	1.0	1.0 (1.7 or earlier)	4.0	3.5	1.0 (85)
Four-value syntax (support for offset from any edge)	No support^[1]	13.0 (13.0)	No support	10.5	No support^[1]

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	(Yes)	1.0 (1)	(Yes)	(Yes)	(Yes)
Combination of a keyword and a `<length>` or `<percentage>`	(Yes)	1.0 (1)	(Yes)	(Yes)	(Yes)
Four-value syntax (support for offset from any edge)	No support	13.0 (13.0)	?	?	No support

[1] See WebKit bug 37514.