top

该属性用于指定当前元素在有定位的包含块元素中的位置。对绝对定位的元素，它指向了元素上边界同其包含上边界之间的距离。为非绝对定位元素，它指向了元素低于其正常的位置移动量。

 

语法

/* <length> value */
top: 2.5em;

/* <percentage> value */
top: 95%;

top: auto;
top: inherit;

值

值描述
<length> 该关键词表示负数，null，整数。对绝对定位元素，该值为到包含块元素上边界的距离。对于相对定位元素，若未被定义，该值为该元素相对正常文档流中的偏移量。
<percentage> 该关键词表示包含块宽度的百分比。
auto 此关键词表示关键字。对绝对定位元素，元素的定位基于bottom属性和指定的宽度，auto宽度值则基于容器大小来计算。对相对定位元素，其相对于原始位置的上偏移量是基于bottom属性来计算的。
inherit 此关键词表示值来自于父元素的计算值。

例子

HTML 

<div id="red">
   <div id="orange"></div>
</div>

CSS 

#red {
     width: 200px;
     height: 100px;
     background: red;
     position: relative;
}
#orange {
     width: 50px;
     height: 50px;
     background: orange;
     position: absolute;
     top: 30px;
}

执行结果

参考

相关链接

外部链接


跳至内容顶部