MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

这篇翻译不完整。请帮忙从英语翻译这篇文章

概要

<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> 值表述的最终位置并不需要位于元素的盒子中。

如果仅指定单个偏移量,它将指定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.

浏览器兼容性

特性 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,