1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
|
---
title: <position>
slug: Web/CSS/position_value
translation_of: Web/CSS/position_value
---
<p>{{ CSSRef() }}</p>
<h2 id="概要">概要</h2>
<p><code><position></code> <a href="/en/CSS" title="CSS">CSS</a> 数据类型表示用于设置相对于框的位置的2D空间中的坐标。</p>
<p><img alt="" src="/files/3797/position_type.png" style="float: left; height: 208px; width: 306px;">特定坐标可以由具有特定偏移的两个关键字给出。关键字表示元素框的一条边或两条边之间的中心线：左，右，上，下或中心 (其表示左边缘和右边缘之间的中心，或者顶部边缘或底部边缘之间的中心，这取决于上下文).</p>
<div class="note">
<p> A keyword represents one edge of the element's box or the center line between two edges: <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> or <code>center</code> (which represents either the center between the left and right edges, or the center between the top or bottom edges, depending on the context).</p>
</div>
<p>{{ experimental_inline() }}一个偏移量可以是一个相对值用以表示 {{cssxref("<percentage>")}} （百分比），或是一个绝对的 {{cssxref("<length>")}} （长度）值。正值是向右或向下的偏移，看适用于哪一个。负值则是在另外方向上的偏移。</p>
<p> <code><position></code> 值表述的最终位置并不需要位于元素的盒子中。</p>
<p>如果仅指定单个偏移量，它将指定x轴坐标。当只有单个偏移量或关键字被指定时，对于另个轴的值将被假定为“center”。</p>
<h2 id="补间" style="">补间</h2>
<p>横坐标值和纵坐标值都独立进行补间。而由于两者（补间）速度都由同一 {{cssxref("<timing-function>")}} （函数）定义，点将沿一条直线移动。</p>
<h2 id="取值">取值</h2>
<pre class="brush:css">/* 1-value syntax */
<var>keyword</var> /* The corresponding edge, the other direction is corresponding to center, the middle of the edge */
<var><length></var> or <var><percentage></var> /* The position on the x-axis, 50% for the y-axis */
/* 2-value syntax */
<var>keyword</var> <var>keyword</var> /* A keyword for each direction, the order is irrelevant */
<var>keyword</var> <var>value</var> /* The value is the offset for the edge defined by the keyword */
</pre>
<h3 id="正式语法">正式语法</h3>
<pre class="syntaxbox">[ [ left | center | right | top | bottom | <var><percentage></var> | <var><length></var> ] |
[ left | center | right | <var><percentage></var> | <var><length></var> ] [ top | center | bottom | <var><percentage></var> | <var><length></var> ] |
[ center | [ left | right ] [ <var><percentage></var> | <var><length></var> ]? ] &&
[ center | [ top | bottom ] [ <var><percentage></var> | <var><length></var> ]? ]
]
</pre>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">注释</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Values', '#position', '<position>') }}</td>
<td>{{ Spec2('CSS3 Values') }}</td>
<td>Relists links to both definition, with the requirement to be coherent: if {{ SpecName('CSS3 Backgrounds', '', '') }} is supported, its definition of <code><position></code> must be used too.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Backgrounds', '#ltpositiongt', '<position>') }}</td>
<td>{{ Spec2('CSS3 Backgrounds') }}</td>
<td>Defines <code><position></code> explicitly and extends it to support offsets from any edge. {{ experimental_inline() }}</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'colors.html#background-properties', '<position>') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>Allows combination of a keyword with a {{cssxref("<length>")}}, or {{cssxref("<percentage>")}} value.</td>
</tr>
<tr>
<td>{{ SpecName('CSS1', '#background-position', '<position>') }}</td>
<td>{{ Spec2('CSS1') }}</td>
<td>Defines <code><position></code> anonymously as the value of {{ cssxref("background-position") }}.</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>特性</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>1.0</td>
<td>{{ CompatGeckoDesktop("1") }}</td>
<td>4.0</td>
<td>3.5</td>
<td>1.0 (85)</td>
</tr>
<tr>
<td>Combination of a keyword and a {{cssxref("<length>")}}, or {{cssxref("<percentage>")}}</td>
<td>1.0</td>
<td>{{ CompatGeckoDesktop("1") }}</td>
<td>4.0</td>
<td>3.5</td>
<td>1.0 (85)</td>
</tr>
<tr>
<td>Four-value syntax (support for offset from any edge) {{ experimental_inline() }}</td>
<td>{{ CompatNo() }} {{ webkitbug("37514") }}</td>
<td>{{ CompatGeckoDesktop("13.0") }}</td>
<td>{{ CompatNo() }}</td>
<td>10.5</td>
<td>{{ CompatNo() }} {{ webkitbug("37514") }}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>特性</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatGeckoMobile("1") }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
</tr>
<tr>
<td>Combination of a keyword and a {{cssxref("<length>")}}, or {{cssxref("<percentage>")}}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatGeckoMobile("1") }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
</tr>
<tr>
<td>Four-value syntax (support for offset from any edge) {{ experimental_inline() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatGeckoMobile("13.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatNo() }}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="sect1"> </h2>
|
