CSS <position> Data Type

Description

The <position> CSS data type represents information for positioning an element in horizontal and vertical directions using a mix of keywords, percentage, and length values. The <position> data type is used in the background-position and offset-anchor properties.

Syntax

<position> = [
  [ left | center | right ] || [ top | center | bottom ]
|
  [ left | center | right | <length-percentage> ]
  [ top | center | bottom | <length-percentage> ]?
|
  [ [ left | right ] <length-percentage> ] &&
  [ [ top | bottom ] <length-percentage> ]
]

Values

leftIs equivalent to a horizontal position of 0%.
rightIs equivalent to a horizontal position of 100%.
topIs equivalent to a vertical position of 0%.
bottomIs equivalent to a vertical position of 100%.
centerIs equivalent to position of 50% in the applicable direction.

Example

HTML

<p>Example of the position CSS data type</p>

CSS

body {
    height:100%;
    background-color:#222;
    background-image:
       radial-gradient(circle at center, red, indigo 3em),
       radial-gradient(circle farthest-side at top right, yellow, green 90%, blue),
       radial-gradient(ellipse at left 50%, yellow, orange 30%);
    background-size:15em 10em, 30% 70%, 100px 70px;
    background-position: center left, center calc(100% - 1em), 100% 50%;
    background-repeat:no-repeat no-repeat, no-repeat no-repeat, no-repeat no-repeat;
}
p {
   color: white;
}

Result