<position>

The <position> data type specifies the position of an element inside a positioning area, usually the containing element. An example would be the position of a background image relative to the element it is applied to.

When an element is positioned relative to a positioning area, it is positioned relative to the positioning area’s coordinate system. The coordinate system is a reference point for the offset values of the <position> given to a property. The origin of the coordinate system in CSS is located at the top left corner of the element.

A <position> can be described based on the official syntax (grammar) as follows:

<position> = [
  [ 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> ]? ]
]
               

A <position> can be defined by using offset keywords (top, left, bottom, right, and center), or relative <percentage> and <length> offset values.
These values describe the position of the element relative to its container’s edges (top edge and left edge). Positive offset values move the element to the right (relative to the left edge) and towards the bottom (relative to the top edge) of the element, and negative offset values move it to the left or towards the top.

A position can be described by specifying one offset value (keyword, percentage, or length), two offset values (a combination of two of the three possible values), or four offset values (a keyword and a relative numerical value).

When only one offset value is specified, the second value is assumed to be center. For example, the following declarations

background-position: top;

/* or */

background-position: 25px;

                   

are equivalent to:

background-position: top center;

/* or */

background-position: 25px center;
                   

Now the question is: when the position is described in two offset values, which value describes the vertical offset and which value describes the horizontal offset?
Well, in the first case, where the specified value is top, the center value is the center across the horizontal (x-axis) line. So, if at least one of the offset values is a keyword, it’s possible to know which is which.

But when the position is described in two offset values, and none of the values describe the direction of the offset, like the 25px center; example above, or center center, or 10px 30px, then the first value represents the horizontal position and the second represents the vertical position.

For numerical offsets (<percentage> and <length>), negative values are allowed. The negative value moves the element to the left on the horizontal axis and towards the top on the vertical axis.

Hence, the final position of an element does not necessarily have to be inside its container. An element could be moved outside the boundaries of its container by specifying negative offsets that would push or pull the element to the outside. (see demo below for an example).

<length>

A length aligns the element’s top left corner by a distance to the right (for horizontal) or to the bottom (for vertical) on the coordinate system. For example, a position 25px 30px; will move the element so that its top left corner coincides with the point of coordinates (25px, 30px) on the coordinate system.

<percentage>

Unlike the <length> offset value which moves the element’s top left corner by a specified distance, a percentage X aligns the point at X% across (for horizontal) or down (for vertical) the image with the point at X% across (for horizontal) or down (for vertical) the container.

For example, with a value pair of 0% 0%, the upper left corner of the image is aligned with the upper left corner of the padding box. A value pair of 100% 100% places the lower right corner of the image in the lower right corner of the padding box. With a value pair of 75% 50%, the point 75% across and 50% down the image is to be placed at the point 75% across and 50% down the container. Have a look at the following image for a visual explanation:

top

Equivalent to ‘0%’ for the vertical position.

right

Equivalent to ‘100%’ for the horizontal position.

bottom

Equivalent to ‘100%’ for the vertical position.

left

Equivalent to ‘0%’ for the horizontal position.

center

Equivalent to ‘50%’ for the horizontal position if it is not otherwise given, or ‘50%’ for the vertical position if it is.

As mentioned earlier, the position can be described by one value and the second defaults to center, or by two values, and they can be mixed and matched: using a percentage offset with a length offset, or a percentage with an offset keyword, etc. Note that a pair of keywords can be reordered while a combination of keyword and length or percentage cannot. So center left is valid while 50% left is not, it must be left 50%; when a combination of keyword and a length or percentage value is used, the first value always corresponds to the horizontal offset and the second value to the vertical offset.

In addition to that, some browsers support a four-value syntax to describe the position. If three out of four values are specified, the fourth value is assumed to be zero. When three or four values are given, then each <percentage> or <length> represents an offset and must be preceded by a keyword, which specifies from which edge the offset is given. For example, background-position: bottom 10px right 20px represents a 10px vertical offset up from the bottom edge and a 20px horizontal offset leftward from the right edge. If three values are given, the missing offset is assumed to be zero.
For example:

 background-position: left 10px top 15px;   /* 10px, 15px */
 background-position: left      top     ;   /*  0px,  0px */
 background-position:      10px     15px;   /* 10px, 15px */
 background-position: left          15px;   /*  0px, 15px */
 background-position:      10px top     ;   /* 10px,  0px */
 background-position: left      top 15px;   /*  0px, 15px */
 background-position: left 10px top     ;   /* 10px,  0px */
                    

Trivia and Notes

The <position> value is not the same as the position property. Nonetheless, they are both used to define an element’s position. The technical behavior of these two is similar. Both rely on the rectangular nature of CSS elements and position elements relative so a coordinate system. The position property is used to create the coordinate system on elements and then the position offsets are defined using the offset properties (top, left, right, and bottom), while the <position> value is a value in itself and it describes a position by offset values.

You can read more about the rectangular nature of CSS elements and about positioning these elements in the display and position property entries.

Transitioning <position>s

Because the position of an element is specified and computed as coordinates (abscissa and ordinates) this means that it can be transitioned from one value to another. The coordinates are interpolated each on its own to get the values for the final position. The speed at which the transition occurs can be controlled using a CSS timing function.