就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. CSS
  3. <position>

在此页

<position> (或 <bg-position> ) CSS data type denotes a two-dimensional coordinate used to set a location relative to an element box. It is used in the background-position and offset-anchor 特性。

注意： The final position described by the <position> value does not need to be inside the element's box.

句法

<position> data type is specified with one or two keywords, with optional offsets.

The keyword values are center , top , right , bottom ，和 left . Each keyword represents either an edge of the element's box or the center line between two edges. Depending on the context, center represents either the center between the left and right edges, or the center between the top and bottom edges.

If specified, an offset can be either a relative <percentage> value or an absolute <length> value. Positive values are offset towards the right or the bottom, whichever is appropriate. Negative values are offset in the opposite directions.

If only a single offset value is specified, it defines the x-coordinate, with the value for the other axis defaulting to center . 

/* 1-value syntax */
keyword                  /* Either the horizontal or vertical position; the other axis defaults to center */
value                    /* 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            /* A keyword for horizontal position, value for vertical position */
value keyword            /* A value for horizontal position, keyword for vertical position */
value value              /* A value for each direction (horizontal then vertical) */
/* 4-value syntax */
keyword value keyword value /* Each value is an offset from the keyword that preceeds it */

形式句法 

[
 [ left | center | right ] || [ top | center | bottom ]
|
 [ left | center | right | <length> | <percentage> ]
 [ top | center | bottom | <length> | <percentage> ]?
|
 [ [ left | right ] [ <length> | <percentage> ] ] &&
 [ [ top | bottom ] [ <length> | <percentage> ] ]
]

注意 : The background-position property also accepts a three-value syntax. This is not allowed in other properties that use <position> .

插值

When animated, a point's abscissa and ordinate values are interpolated independently. However, because the speed of the interpolation is determined by a single timing function for both coordinates, the point will move in a straight line.

范例

Valid positions 

center
left
center top
right 8.5%
bottom 12vmin right -6px
10% 20%
8rem 14px

Invalid positions 

left right
bottom top
10px 15px 20px 15px

规范

规范 状态 注释
CSS Values and Units Module Level 3
The definition of '<position>' in that specification. 		候选推荐 Relists links to both definitions: if CSS Backgrounds and Borders Module Level 3 is supported, its definition of <position> must also be used.
CSS Backgrounds and Borders Module Level 3
The definition of '<bg-position>' in that specification. 		候选推荐 定义 <position> explicitly and extends it to support offsets from any edge.
CSS Level 2 (Revision 1)
The definition of '<position>' in that specification. 		推荐 Allows combination of a keyword with a <length> or <percentage> 值。
CSS Level 1
The definition of '<position>' in that specification. 		推荐 定义 <position> anonymously as the value of background-position .

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
<position> Chrome 完整支持 1 Edge 完整支持 12 Firefox 完整支持 1 IE 完整支持 4 Opera 完整支持 3.5 Safari 完整支持 1 WebView Android 完整支持 ≤37 Chrome Android 完整支持 18 Firefox Android 完整支持 4 Opera Android 完整支持 14 Safari iOS 完整支持 1 Samsung Internet Android 完整支持 1.0
Four-value syntax for offset from any edge Chrome 完整支持 25 Edge 完整支持 12 Firefox 完整支持 13 IE 完整支持 9 Opera 完整支持 10.5 Safari 完整支持 7 WebView Android 完整支持 ≤37 Chrome Android 完整支持 25 Firefox Android 完整支持 14 Opera Android 完整支持 14 Safari iOS 完整支持 7 Samsung Internet Android 完整支持 1.5
Syntax combining a keyword and <length> or <percentage> Chrome 完整支持 1 Edge 完整支持 12 Firefox 完整支持 1 IE 完整支持 4 Opera 完整支持 3.5 Safari 完整支持 1 WebView Android 完整支持 ≤37 Chrome Android 完整支持 18 Firefox Android 完整支持 4 Opera Android 完整支持 14 Safari iOS 完整支持 1 Samsung Internet Android 完整支持 1.0
Three-value syntax for properties other than background-position 弃用 Chrome 不支持 25 — 68 Edge 不支持 12 — 79 Firefox 不支持 13 — 70 IE 完整支持 9 Opera 不支持 10.5 — 55 Safari 完整支持 1 WebView Android 不支持 ≤37 — 68 Chrome Android 不支持 25 — 68 Firefox Android 完整支持 14 Opera Android 不支持 14 — 48 Safari iOS 完整支持 1 Samsung Internet Android 不支持 1.5 — 10.0

图例

完整支持

完整支持

不支持

不支持

弃用。不要用于新网站。

弃用。不要用于新网站。

另请参阅

元数据

  • 最后修改：
  1. CSS
  2. CSS 参考
  3. CSS Types
  4. 特性
    1. <angle-percentage>
    2. <angle>
    3. <basic-shape>
    4. <blend-mode>
    5. <custom-ident>
    6. <dimension>
    7. <frequency-percentage>
    8. <frequency>
    9. <gradient>
    10. <image>
    11. <integer>
    12. <length-percentage>
    13. <length>
    14. <number>
    15. <percentage>
    16. <ratio>
    17. <resolution>
    18. <shape>
    19. <string>
    20. <time-percentage>
    21. <time>
    22. <transform-function>
    23. <url>
    24. color
    25. flex
    26. ident
    27. position