CSS-定位 |

CSSposition属性用于指定一个元素在文档中的定位方式。toprightbottom和 left属性则决定了该元素的最终位置。

CSS-定位 | <position>

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

上一篇:CSS-背景裁剪 | background-clip


下一篇:跟小静读CLR via C#-开篇及目录