<position>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

CSS <position>(或 <bg-position>数据类型表示用于设置相对于元素盒子的位置的 2 维空间中的坐标。它被用于 background-positionoffset-anchor 属性。

备注:<position> 值表述的最终位置并不需要位于元素的盒子中。

语法

显示各类值放置的网格。0 0 是左上角。right、right center、center left 100% 和 top 50% left 100%,这四个值是等价的都在垂直方向中间的右侧边缘。top 75px left 100px 和 left 100px top 75px,这两个值是相同的。bottom left 25% 与 top 100% left 25% 相同。

<position> 数据类型可用一个或两个关键字(可带有偏移量)指定。

关键字值为:中(center)、上(top)、右(right)、下(bottom)、左(left)。每个关键字代表元素盒子的边缘或两个边缘之间的中心线。根据上下文,center 可以表示左边缘和右边缘之间的中心,或者顶部边缘或底部边缘之间的中心。

如果指定了偏移量,其值可以是相对值 <percentage> 或绝对值 <length>。正值是向右或向下的偏移,取决于应用的边缘。负值则是在相反方向上的偏移。

如果仅指定单个偏移量,则用于指定 x 轴坐标,其他轴的值默认为 center

css
/* 单值语法 */
keyword                  /* 水平或垂直位置;另一个轴默认为 center */
value                    /* x 轴上的位置;y 轴默认为 50% */

/* 2 值语法 */
keyword keyword          /* 每个方向一个关键字(顺序无关) */
keyword value            /* 水平位置为关键字,垂直位置为值 */
value keyword            /* 水平位置为值,垂直位置为关键字 */
value value              /* 每个方向一个值(先水平然后垂直) */

/* 4 值语法 */
keyword value keyword value /* 每个值都是其前面的关键字的偏移量 */

备注: 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

规范

Specification
CSS Values and Units Module Level 4
# position

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
<position>
Four-value syntax for offset from any edge
Syntax combining a keyword and <length> or <percentage>

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见