The <position> CSS data type denotes a coordinate position in 2D space used to set a location relative to a box. The final position described by the <position> value does not need to be inside the element's box.
A position coordinate is specified with one or two keywords, with optional offsets. Each keyword (left, right, top, bottom, or center) represents either an edge of the element's box or the center line between two edges. Depending on the context, center represents either the center between the left and right edges, or the center between the top and bottom edges.
If specified, an offset can be either a relative <percentage> value or an absolute <length> value. Positive values are offset towards the right or the bottom, whichever is appropriate. Negative values are offset in the opposite directions.
If only a single keyword or offset is specified, it defines the x-coordinate; 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 straight line.
Values
/* 1-value syntax */ keyword /* Either the horizontal or vertical position; the other axis defaults to center */ <length> or <percentage> /* The position on the x-axis; the y-axis defaults to 50% */ /* 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. |
Browser compatibility
| 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.