CSS-定位 | <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 |
