The <position> CSS data type denotes a two-dimensional coordinate used to set a location relative to an element box. It is used in the background-position property.

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

Syntax

The <position> data type is specified with one or two keywords, with optional offsets.

The keyword values are center, top, right, bottom, and left. Each keyword 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, with the value for the other axis defaulting to center.

/* 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> ]? ]
                ]

Interpolation

When animated, a point's abscissa and ordinate values are interpolated independently. However, because the speed of the interpolation is determined by a single timing function for both coordinates, the point will move in a straight line.

Examples

Valid positions

center
left
center top

right 8.5%
bottom 12vmin right -6px

10% 20%
8rem 14px

Invalid positions

left right
bottom top
10px 15px 20px 15px

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: if CSS Backgrounds and Borders Module Level 3 is supported, its definition of <position> must also be used.
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 Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 12 1.0 (1.7 or earlier) 4.0 3.5 1.0 (85)
Combination of a keyword and a <length> or <percentage> 1.0 12 1.0 (1.7 or earlier) 4.0 3.5 1.0 (85)
Four-value syntax (support for offset from any edge) 25.0 12 13.0 (13.0) 9.0 10.5 7.0
Feature Android Chrome for Android Edge mobile Firefox Mobile (Gecko) IE mobile Opera Android iOS Safari
Basic support (Yes) (Yes) (Yes) 1.0 (1) (Yes) (Yes) (Yes)
Combination of a keyword and a <length> or <percentage> (Yes) (Yes) (Yes) 1.0 (1) (Yes) (Yes) (Yes)
Four-value syntax (support for offset from any edge) (Yes) (Yes) (Yes) 13.0 (13.0) (Yes) (Yes) 7.1

Document Tags and Contributors

 Last updated by: mfluehr,