<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.
<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> ]? ] ]
<position> can be defined by using offset keywords (
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
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.
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).
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>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:
- Equivalent to ‘0%’ for the vertical position.
- Equivalent to ‘100%’ for the horizontal position.
- Equivalent to ‘100%’ for the vertical position.
- Equivalent to ‘0%’ for the horizontal position.
- 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.
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
<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 (
bottom), while the
<position> value is a value in itself and it describes a position by offset values.
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.
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 */
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
The position values are supported in all major browsers: Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.