<position>

<position> CSS 数据类型 表示用于设置相对于元素盒的位置的二维坐标。它用于 background-position、object-position、mask-position offset-position、offset-anchor 和 transform-origin 属性。

注意：<position> 值描述的最终位置不必在元素的盒内。

语法

Grid showing placement of various values. 0 0 is the top left corner. The four values, right, right center, center left 100%, and top 50% left 100%, are all equivalent, being on the right edge in the middle vertically. The two values, top 75px left 100px and left 100px top 75px, are the same. Bottom left 25% is the same as top 100% left 25%.

<position> 数据类型使用一个或两个关键字指定，并带可选的偏移量。

关键字值为 center、top、right、bottom 和 left。每个关键字代表元素盒的边缘或两个边缘之间的中心线。根据上下文，center 代表左边缘和右边缘之间的中心，或上边缘和下边缘之间的中心。

如果指定了偏移量，则可以是相对 <percentage> 值或绝对 <length> 值。正值向右或向下偏移，具体取决于情况。负值向相反方向偏移。

如果只指定了一个偏移量值，则它定义 x 坐标，另一个轴的值默认为 center。

css
/* 1-value syntax */
keyword                  /* Either the horizontal or vertical position; the other axis defaults to center */
value                    /* The position on the x-axis; the y-axis defaults to 50% */

/* 2-value syntax */
keyword keyword          /* A keyword for each direction (the order is irrelevant) */
keyword value            /* A keyword for horizontal position, value for vertical position */
value keyword            /* A value for horizontal position, keyword for vertical position */
value value              /* A value for each direction (horizontal then vertical) */

/* 4-value syntax */
keyword value keyword value /* Each value is an offset from the keyword that precedes it */

注意：background-position 属性还接受三值语法。在使用 <position> 的其他属性中不允许这样做。

插值

在动画时，点的横坐标和纵坐标值是独立插值的。但是，由于插值的速度由单个 缓动函数 同时确定两个坐标，因此该点将沿直线移动。

正式语法

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

<length-percentage> = 
  <length>      |
  <percentage>

示例

有效位置

center
left
center top

right 8.5%
bottom 12vmin right -6px

10% 20%
8rem 14px

无效位置

left right
bottom top
10px 15px 20px 15px

规范

规范
CSS 值和单位模块 Level 4
# position

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅