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
<p>Example of the position CSS data type</p>
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;
}
Browser Support
Desktop | |||||
4 | 12 | 1 | 1 | 3.5 | 1 |
Tablets / Mobile | |||||
![]() |
|||||
≤37 | 18 | 4 | Yes | 1 | Yes |
Last updated by CSSPortal on: 9th December 2019