定位 | <position>
![](https://ask.qcloudimg.com/http-save/devdocs/vqso7lxnhk.png)
位置坐标由一个或两个关键字指定,并带有可选的偏移量。每个关键字(left
,right
,top
,bottom
,或center
)表示任一元件的盒子的边缘或两个边缘之间的中心线上。根据上下文,center
表示左边缘和右边缘之间的中心,或者表示顶边和底边之间的中心。
如果指定,偏移量可以是相对<percentage>
值或绝对值<length>
。正值向右或向下偏移,以适当值为准。负值在相反的方向上偏移。
如果只指定一个关键字或偏移量,则它定义x坐标; 另一个轴的值被假定为center
。
内插值
横坐标和纵坐标都是独立插值的。由于速度由<timing-function>
两者定义,点将沿直线移动。
值
/* 1-value syntax */
keyword /* Either the horizontal or vertical position; the other axis defaults to center */
<length> or <percentage> /* 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 /* 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> ]? ]
]
规范
Specification | Status | Comment |
---|---|---|
CSS Values and Units Module Level 3The definition of '<position>' in that specification. | Candidate Recommendation | Relists links to both definitions 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 3The definition of '<position>' in that specification. | Candidate Recommendation | Defines <position> explicitly and extends it to support offsets from any edge. |
CSS Level 2 (Revision 1)The definition of '<position>' in that specification. | Recommendation | Allows combination of a keyword with a <length>, or <percentage> value. |
CSS Level 1The definition of '<position>' in that specification. | Recommendation | Defines <position> anonymously as the value of background-position. |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1.0 | 12 | 1.0 (1.7 or earlier) | 4.0 | 3.5 | 1.0 (85) |
Combination of a keyword and a <length> or <percentage> | 1.0 | 12 | 1.0 (1.7 or earlier) | 4.0 | 3.5 | 1.0 (85) |
Four-value syntax (support for offset from any edge) | 25.0 | 12 | 13.0 (13.0) | 9.0 | 10.5 | 7.0 |
Feature | Android | Chrome for Android | Edge mobile | Firefox Mobile (Gecko) | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | 1.0 (1) | (Yes) | (Yes) | (Yes) |
Combination of a keyword and a <length> or <percentage> | (Yes) | (Yes) | (Yes) | 1.0 (1) | (Yes) | (Yes) | (Yes) |
Four-value syntax (support for offset from any edge) | (Yes) | (Yes) | (Yes) | 13.0 (13.0) | (Yes) | (Yes) | 7.1 |
本文档系腾讯云开发者社区成员共同维护,如有问题请联系 cloudcommunity@tencent.com