MDN wants to learn about developers like you:



<position> CSS  数据类型表示用于设置相对于框的位置的2D空间中的坐标。

特定坐标可以由具有特定偏移的两个关键字给出。关键字表示元素框的一条边或两条边之间的中心线:左,右,上,下或中心 (其表示左边缘和右边缘之间的中心,或者顶部边缘或底部边缘之间的中心,这取决于上下文).

 A keyword represents one edge of the element's box or the center line between two edges: leftrighttopbottom or center (which represents either the center between the left and right edges, or the center between the top or bottom edges, depending on the context).

一个偏移量可以是一个相对值用以表示 <percentage> (百分比),或是一个绝对的 <length> (长度)值。正值是向右或向下的偏移,看适用于哪一个。负值则是在另外方向上的偏移。

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



横坐标值和纵坐标值都独立进行补间。而由于两者(补间)速度都由同一 <timing-function> (函数)定义,点将沿一条直线移动。


/* 1-value syntax */
keyword                  /* The corresponding edge, the other direction is corresponding to center, the middle of the edge */
<length> or <percentage> /* The position on the x-axis, 50% for the y-axis */

/* 2-value syntax */
keyword keyword          /* A keyword for each direction, the order is irrelevant */
keyword value            /* The value is the offset for the edge defined by the keyword */


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


规范 状态 注释
CSS Values and Units Module Level 3
Candidate Recommendation Relists links to both definition, with the requirement to be coherent: if CSS Backgrounds and Borders Module Level 3 is supported, its definition of <position> must be used too.
CSS Backgrounds and Borders Module Level 3
Candidate Recommendation Defines <position> explicitly and extends it to support offsets from any edge.
CSS Level 2 (Revision 1)
Recommendation Allows combination of a keyword with a <length>, or <percentage> value.
CSS Level 1
Recommendation Defines <position> anonymously as the value of background-position.


We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 4.0 3.5 1.0 (85)
Combination of a keyword and a <length>, or <percentage> 1.0 1.0 (1.7 or earlier) 4.0 3.5 1.0 (85)
Four-value syntax (support for offset from any edge) 未实现 WebKit bug 37514 13.0 (13.0) 未实现 10.5 未实现 WebKit bug 37514
特性 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) 1.0 (1) (Yes) (Yes) (Yes)
Combination of a keyword and a <length>, or <percentage> (Yes) 1.0 (1) (Yes) (Yes) (Yes)
Four-value syntax (support for offset from any edge) 未实现 13.0 (13.0) ? ? 未实现



 此页面的贡献者: xhlsrj, xgqfrms-GitHub, mrstork, fscholz, zhujun24
 最后编辑者: xhlsrj,