定位 | <position>
位置坐标由一个或两个关键字指定，并带有可选的偏移量。每个关键字（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
