<position> - CSS（层叠样式表） 编辑

概要

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

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

 A keyword represents one edge of the element's box or the center line between two edges: left, right, top, bottom 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> 值表述的最终位置并不需要位于元素的盒子中。

如果仅指定单个偏移量，它将指定x轴坐标。当只有单个偏移量或关键字被指定时，对于另个轴的值将被假定为“center”。

补间

横坐标值和纵坐标值都独立进行补间。而由于两者（补间）速度都由同一 <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 <position>	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 <position>	Candidate Recommendation	Defines <position> explicitly and extends it to support offsets from any edge.
CSS Level 2 (Revision 1) <position>	Recommendation	Allows combination of a keyword with a <length>, or <percentage> value.
CSS Level 1 <position>	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!

• Desktop
• Mobile

特性	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)	?	?	未实现