CSS属性参考 | bottom

CSS bottom属性用来指定被定位元素底部边缘的位置。该属性定义了被定位元素底部外边距边界与其包含块元素底部边界之间的偏移。

bottom是一个偏移属性，偏移属性用于指定一个被定位元素的精确位置，对于static的元素没有效果。要使用这个CSS属性，必须为元素设置一个position值，而不能是默认的static定位方式。

在CSS中，可用的偏移属性有四个，包括top、right、bottom和left。

对于绝对定位或固定定位的元素，即position属性设置为absolute或者fixed的元素，bottom属性指定元素底边距边缘和包含该元素的容器的底边缘的距离。

对于相对定位的元素，即position属性设置为relative的元素，bottom属性指定元素的下边界离开其正常位置的距离。

如果为一个元素同时设置了top和bottom属性，并且没有为这个元素设置高度属性height，或者该元素的高度设置为auto，或者该元素的高度设置为100%的时候，top和bottom属性都会生效，此时元素高度会被拉伸，底部边和顶部边分别位于bottom和top属性设置的地方。

如果为一个元素指定了固定的高度，并为这个元素同时设置了top和bottom属性，那么top属性会被优先设置，bottom属性会被忽略。

官方语法

bottom: <length> | <percentage> | auto                     
                            

参数：

• <length>：使用固定的长度值指定元素的底部偏移。长度值可以参考<length>数据类型。长度值允许为负数。
• <percentage>：使用元素的包含块的百分比值来指定底部偏移值。百分比值可以参考<percentage>数据类型。百分比值允许为负数。
• auto：当bottom属性设置为auto的时候，分为两种情况：
  • 如果元素是相对定位的，在垂直方向上会根据top属性的值来定位。如果top属性也设置为auto，那么元素在垂直方向上不会移动。
  • 如果元素是绝对定位的，在垂直方向上会根据top属性的值来定位。如果元素的高度设置为auto，那么元素的高度会随着内容的增加而增长。

bottom属性的初始值为auto。

bottom属性可以使用inherit属性从它的父元素中继承底部偏移值。它的父元素不一定是它的定位上下文。

应用范围

bottom属性可以应用在所有可以被定位的元素上。

示例代码

/* 使用长度值 */
bottom: 3px;
bottom: 2.4em;

/* 使用元素包含块的百分比值 */
bottom: 10%;

/* 使用关键字 */
bottom: auto;
bottom: inherit;                              
                            

在线演示

1、在相对定位的元素上使用bottom属性：

2、在绝对定位的元素上使用bottom属性：

3、bottom值设置为auto的情况：这个demo中，元素的bottom属性设置为auto，元素的定位方式为相对定位，此时它会根据top属性来在垂直方向上移动元素，这里设置top的值为30像素，所以元素会定位在距离父元素顶部边框30像素的地方。（水平方向上的偏移通过left和right属性来控制）

下载源代码

浏览器支持

所有的现代浏览器都支持bottom属性，包括Chrome，Firefox，Safari，Opera，IE 以及 Android 和 iOS。

相关阅读

• CSS Visual Formatting Model
• MDN bottom
• CSS属性参考 | position