CSS-定位 | <position>

CSS

position

屬性用于指定一個元素在文檔中的定位方式。

top

，

right

bottom

和 

left

屬性則決定了該元素的最終位置。

位置坐标由一個或兩個關鍵字指定，并帶有可選的偏移量。每個關鍵字（

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.		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.		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>
Four-value syntax (support for offset from any edge)	25.0		13.0 (13.0)	9.0	10.5	7.0

	Android	Chrome for Android	Edge mobile	Firefox Mobile (Gecko)	IE mobile	Opera Android	iOS Safari
	(Yes)			1.0 (1)
							7.1