CSS属性参考 | top

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

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

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

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

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

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

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

官方语法

top: <length> | <percentage> | auto                     

参数：

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

top属性的初始值为auto。

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

应用范围

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

示例代码

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

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

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

在线演示

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

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

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

浏览器支持

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

相关阅读

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