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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
|
---
title: left
slug: Web/CSS/left
tags:
- CSS
- CSS Positioning
- CSS Property
- Reference
translation_of: Web/CSS/left
---
<div>{{CSSRef}}</div>
<p><a href="/zh-CN/docs/Web/CSS">CSS</a> <strong><code>left</code></strong>属性定义了定位元素的左外边距边界与其包含块左边界之间的偏移，非定位元素设置此属性无效。</p>
<pre class="brush: css">/* <length> values */
left: 3px;
left: 2.4em;
/* <percentage>s of the width of the containing block */
left: 10%;
/* Keyword value */
left: auto;
/* Global values */
left: inherit;
left: initial;
left: unset;
</pre>
<p><code>left</code>的效果取决于元素的<code>position</code>属性：</p>
<ul>
<li>当<code>position</code>设置为<code>absolute</code>或<code>fixed</code>时，<code>left</code>属性指定了定位元素左外边距边界与其包含块左边界之间的偏移。</li>
<li>当<code>position</code>设置为<code>relative</code>时，<code>left</code>属性指定了元素的左边界离开其正常位置的偏移。</li>
<li>当<code>position</code>设置为<code>sticky</code>时，如果元素在viewport里面，<code>left</code>属性的效果和position为<code>relative</code>等同；如果元素在viewport外面，<code>left</code>属性的效果和position为<code>fixed</code>等同。</li>
<li>当<code>position</code>设置为<code>static</code>时，<code>left</code>属性无效。</li>
</ul>
<p>当<font face="consolas, Liberation Mono, courier, monospace"><code>left</code>和</font>{{cssxref("right")}}同时指定时，元素的位置会被重复指定。当容器是从左到右时，<code>left</code>的值会被优先设定；当容器是从右到左时，<code>right</code>的值会被优先设定。</p>
<p>{{cssinfo}}</p>
<h2 id="语法">语法</h2>
<h3 id="值">值</h3>
<dl>
<dt>{{cssxref("<length>")}}</dt>
<dd>可以是负的，正的 或者 null {{cssxref("<length>")}} 表示:
<ul>
<li>对于绝对定位的元素，元素左外边距边界与其包含块左边界之间的偏移。</li>
<li>对于相对定位定位的元素，元素的左边界离开其正常位置的偏移。</li>
</ul>
</dd>
<dt>{{cssxref("<percentage>")}}</dt>
<dd>代表元素包含块的宽度的百分比 {{cssxref("<percentage>")}}。</dd>
<dt><code>auto</code></dt>
<dd>这个关键字表示:
<ul>
<li>对于绝对定位元素，元素将忽略此属性而以{{ Cssxref("right") }}属性为准，如果此时设置<code>width: auto</code>，将基于内容需要的宽度设置宽度；如果<code>right</code>也为<code>auto</code>的话，元素的水平位置就是它假如作为静态(即static)元素时该在的位置。</li>
<li>对于相对定位元素，元素相对正常位置的偏移量将基于{{ Cssxref("right") }}属性；如果<code>right</code>也为<code>auto</code>的话，元素将不会有偏移。</li>
</ul>
</dd>
<dt><code>inherit</code></dt>
<dd>这个关键字表示该值与其父元素 (可能不是它的包含块) 的计算值相同。对这个计算值的处理将和它原本为 {{cssxref("<length>")}}， {{cssxref("<percentage>")}} 或 <code>auto</code> 一样。</dd>
</dl>
<h3 id="常用语法">常用语法</h3>
{{csssyntax}}
<h2 id="示例">示例</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">#wrap {
width: 700px;
margin: 0 auto;
background: #5C5C5C;
}
pre {
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
word-wrap: break-word;
}
#example_1 {
width: 200px;
height: 200px;
position: absolute;
left: 20px;
top: 20px;
background-color: #D8F5FF;
}
#example_2 {
width: 200px;
height: 200px;
position: relative;
top: 0;
right: 0;
background-color: #C1FFDB;
}
#example_3 {
width: 600px;
height: 400px;
position: relative;
top: 20px;
left: 20px;
background-color: #FFD7C2;
}
#example_4 {
width:200px;
height:200px;
position:absolute;
bottom:10px;
right:20px;
background-color:#FFC7E4;
}</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div id="wrap">
<div id="example_1">
<pre>
position: absolute;
left: 20px;
top: 20px;
</pre>
<p>The only containing element for this div is the main window, so it positions itself in relation to it.</p>
</div>
<div id="example_2">
<pre>
position: relative;
top: 0;
right: 0;
</pre>
<p>Relative position in relation to its siblings.</p>
</div>
<div id="example_3">
<pre>
float: right;
position: relative;
top: 20px;
left: 20px;
</pre>
<p>Relative to its sibling div above, but removed from flow of content.</p>
<div id="example_4">
<pre>
position: absolute;
bottom: 10px;
right: 20px;
</pre>
<p>Absolute position inside of a parent with relative position</p>
</div>
</div>
</div></pre>
<h3 id="案例">案例</h3>
<p>{{EmbedLiveSample('示例',1200,650)}}</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'left')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>Defines <code>left</code> as animatable.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Positioning', '#propdef-left', 'left')}}</td>
<td>{{Spec2('CSS3 Positioning')}}</td>
<td>Adds behavior for sticky positioning.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'visuren.html#propdef-left', 'left')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容">浏览器兼容</h2>
<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
<p>{{Compat("css.properties.left")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li>{{cssxref("position")}}, {{cssxref("right")}}, {{cssxref("top")}}, {{cssxref("bottom")}}</li>
</ul>
|
