CSS <position> Data Type

The CSS <position> data type represents a two-dimensional position within a positioning area. It can use position keywords, lengths, percentages, or combinations of these values to specify horizontal and vertical locations.

Syntax

A <position> can be expressed using keywords, <length-percentage> values, or combinations that position a point relative to the edges of its positioning area.

center
left
right
top
bottom
25% 75%
20px 40px
left top
right bottom
left 20px top 30px

Position Keywords

The keywords left, center, and right describe horizontal positions, while top, center, and bottom describe vertical positions.

Keyword	Position
`left`	Left side of the positioning area
`center`	Center of the applicable axis
`right`	Right side of the positioning area
`top`	Top of the positioning area
`bottom`	Bottom of the positioning area

Length and Percentage Values

Lengths and percentages can specify positions along the horizontal and vertical axes. A percentage generally represents a position relative to the available positioning area after accounting for the size of the positioned object.

25% 50%
20px 40px
2rem 75%

For example, 0% 0% represents the start of both axes, 50% 50% represents the center, and 100% 100% represents the end of both axes.

One-value Syntax

When a single value is specified, the omitted axis is generally centered. A horizontal keyword or a length-percentage value determines the horizontal position, while top or bottom determines the vertical position.

left
center
right
top
bottom
25%

For example, left corresponds to left center, while top corresponds to center top.

Two-value Syntax

Two values can specify both axes. When lengths or percentages are used, the first value represents the horizontal position and the second represents the vertical position.

left top
center center
right bottom
25% 75%
20px 40px

Keyword pairs can also identify positions such as the upper-left, center, or lower-right areas of the positioning area.

Edge-offset Syntax

A <position> can specify an offset from a particular edge by pairing an edge keyword with a length or percentage. This form makes it possible to measure from the right or bottom edge instead of only from the left or top.

left 20px top 30px
right 20px bottom 30px
left 10% bottom 2rem

For example, right 20px bottom 30px places the position 20 pixels from the right edge and 30 pixels from the bottom edge.

<position> Example

The following example uses different background-position values to position the same radial gradient within each box:

.top-left {
  background-position: left top;
}
.center {
  background-position: center;
}
.bottom-right {
  background-position: right bottom;
}

Browser Result

left top

center

right bottom

The position determines where the background image is placed within each element.

The <position> data type is used by CSS properties and functions that position images and other graphical content, including:

Specifications

The <position> data type is defined in the CSS Values and Units Module Level 4 .

CSS <position> Data Type