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
|
---
title: bottom
slug: Web/CSS/bottom
translation_of: Web/CSS/bottom
---
<div>{{CSSRef}}</div>
<p><strong><code>bottom</code></strong><a href="/zh-CN/docs/Web/CSS">样式</a>属性定义了定位元素下外边距边界与其包含块下边界之间的偏移，非定位元素设置此属性无效。</p>
<p><code>bottom</code>的效果取决于元素的<code>position</code>属性：</p>
<ul>
<li>当<code>position</code>设置为<code>absolute</code>或<code>fixed</code>时，<code>bottom</code>属性指定了定位元素下外边距边界与其包含块下边界之间的偏移。</li>
<li>当<code>position</code>设置为<code>relative</code>时，<code>bottom</code>属性指定了元素的下边界离开其正常位置的偏移。</li>
<li>当<code>position</code>设置为<code>sticky</code>时，如果元素在viewport里面，<code>bottom</code>属性的效果和position为<code>relative</code>等同；如果元素在viewport外面，<code>bottom</code>属性的效果和position为<code>fixed</code>等同。</li>
<li>当<code>position</code>设置为<code>static</code>时，<code>bottom</code>属性无效。</li>
</ul>
<p>当 {{cssxref("top")}}和<code>bottom</code>同时指定时，并且 {{cssxref("height")}}没有被指定或者指定为<code>auto</code>或<code>100%</code>的时候，{{cssxref("top")}}和<code>bottom</code>都会生效，在其他情况下，如果 {{cssxref("height")}}被限制，则{{cssxref("top")}}属性会优先设置，<code>bottom</code>属性则会被忽略。</p>
<p>{{cssinfo}}</p>
<h2 id="Syntax" name="Syntax">语法</h2>
<pre>/* <length> values */<code>
bottom: 3px;
bottom: 2.4em;
/* <percentage>s of the height of the containing block */
bottom: 10%;
/* Keyword value */
bottom: auto;
/* Global values */
bottom: inherit;
bottom: initial;
bottom: unset;</code></pre>
<h3 id="值">值</h3>
<ul>
<li>对于<strong>绝对定位的元素</strong>，元素下外边距边界与其包含块下边界之间的偏移。</li>
<li>对于<strong>相对定位定位的元素，</strong>元素的下边界离开其正常位置的偏移。</li>
</ul>
<dl>
<dt><code><length></code></dt>
<dd><font face="Consolas, Liberation Mono, Courier, monospace">一个负值、空值或正值，代表了：</font></dd>
<dt><code><percentage></code></dt>
<dd>包含块高度的百分比{{cssxref("<percentage>")}}。</dd>
<dt><code>auto</code></dt>
<dd>规定：
<ul>
<li>对于绝对定位元素，元素将忽略此属性而以{{ Cssxref("top") }}属性为准，如果此时设置<code>height: auto</code>，将基于内容需要的高度设置宽度；如果<code>top</code>也为<code>auto</code>的话，元素的垂直位置就是它假如作为静态(即static)元素时该在的位置。</li>
<li>对于相对定位元素，元素相对正常位置的偏移量将基于{{ Cssxref("top") }}属性；如果<code>top</code>也为<code>auto</code>的话，元素将不会有偏移。</li>
</ul>
</dd>
<dt><code>inherit</code></dt>
<dd>指代有明确计算结果的父级元素的值，（需要注意的是，父级元素并不一定是包裹该子元素的块级元素）。该值会根据父级元素的具体情况被处理为{{cssxref("<length>")}}, {{cssxref("<percentage>")}}或者<code>auto</code>。</dd>
</dl>
<h3 id="Formal_syntax">Formal syntax</h3>
{{csssyntax}}
<h2 id="Examples" name="Examples">示例</h2>
<p>下面的例子分别展示了<code>bottom</code>属性在<code>position</code>为<code>absolute</code>和<code>fixed</code>的不同行为.</p>
<h3 id="HTML">HTML</h3>
<p> </p>
<pre><code><p>This<br>is<br>some<br>tall,<br>tall,<br>tall,<br>tall,<br>tall<br>content.</p>
<div class="fixed"><p>Fixed</p></div>
<div class="absolute"><p>Absolute</p></div></code>
</pre>
<p> </p>
<p> </p>
<h3 id="CSS">CSS</h3>
<p> </p>
<pre><code>p {
font-size: 30px;
line-height: 2em;
}
div {
width: 48%;
text-align: center;
background: rgba(55,55,55,.2);
border: 1px solid blue;
}
.absolute {
position: absolute;
bottom: 0;
left: 0;
}
.fixed {
position: fixed;
bottom: 0;
right: 0;
}</code></pre>
<p> </p>
<p> </p>
<h3 id="结果">结果</h3>
<p>{{EmbedLiveSample('Example','500','250')}}</p>
<h2 id="Specifications" name="Specifications">规范</h2>
<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', 'bottom')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>Defines bottom as animatable.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Positioning', '#propdef-bottom', 'bottom')}}</td>
<td>{{Spec2('CSS3 Positioning')}}</td>
<td>Adds behavior for sticky positioning.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'visuren.html#choose-position', 'bottom')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
<p> </p>
<div class="hidden">
<p>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。</p>
</div>
<p>{{Compat("css.properties.bottom")}}</p>
<p> </p>
<div> </div>
|
