CSS Reference Data Type

<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.

coordinate-system
Coordinate System on any CSS 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.

edges
The four edges of the element with a coordinate system

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.

length-position
Image showing how an element is moved using length offset values. The top left corner of the element is moved by the specified offsets.
<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:

percentage-position
Image showing how an element is positioned using percentage offset values.
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.

Examples

The following examples are all valid positions set on a background image of an element:

background-position: 20px; /* 20px horizontally, second value is assumed "center" */
background-position: 20px 50px; /* 20px horizontally, 50px vertically */
background-position: 30%; /* equivalent to 30% 50% since the second value is set to 'center' which is 50% */
background-position: top left; /* 0% vertically and 0% horizontally */
background-position: left top 15px;   /*  0px, 15px */
background-position: top 100px; /* 0% vertically and 100px to the right */
background-position: -300px 45px; /* 300px to the left and 45px downwards */
background-position: -10px -10px; /* -10px to the left and -10px upwards */
                

Live Demo

Play with the values in the following demo to get a better feel of how the background image’s position changes when you change the offset values. Mix and match the values to see how they work together.

View this demo on the Codrops Playground

Browser Support

The position values are supported in all major browsers: Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.

Written by

Last updated March 17, 2015 at 12:27 pm by Sara Soueidan

Do you have a suggestion, question or want to contribute? Submit an issue.