CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS top 属性使用方法及示例

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

对于相对定义元素，如果 top 和 bottom 都是 auto，其计算值则都是 0；如果其中之一为 auto，则取另一个值的相反数；如果二者都不是 auto，bottom 将取 top 值的相反数。

注意： 如果 "position" 属性的值为 "static"，那么设置 "top" 属性不会产生任何效果。

  • 对于绝对定位的元素，该top属性指定元素框的顶部边缘在其包含块的顶部边缘下方偏移的距离。

  • 对于相对定位的元素，该top属性指定相对于框自身顶部边缘的偏移量（即，为框指定了正常流中的位置，然后根据这些属性从该位置偏移）。

下表为此属性的用法说明和版本历史记录，以及该属性在javascript脚本中的使用语法。

默认值：auto
适用于：定位元素
继承：没有
可动画制作：是。请参考 动画属性。
版本：CSS 2、3
JavaScript 语法：object.style.top="60px"

top的使用语法

该属性的语法如下：

top: length | percentage | auto | initial | inherit

下面的示例演示了如何使用top属性。

  p {
   position: absolute;
   top: 150px;
  }
测试看看

属性值

下表描述了此属性的值。

值描述
length以px，pt，cm，em等为单位的数值，允许为负值。
percentage指定百分比偏移量。相对于元素包含块的高度计算百分比。允许使用负百分比值。
auto浏览器计算上边缘位置。这是默认值。
initial将此属性设置为其默认值。
inherit如果指定，则关联元素采用其父元素top的属性值。

浏览器兼容性

top属性浏览器的兼容性，下表中的数字表示支持该属性的浏览器最低版本号；所有主流浏览器均支持该属性。

浏览器图标

  • Firefox 1+

  • Google Chrome1+

  • Internet Explorer 4+

  • Apple Safari 1+

  • Opera 6+

进一步阅读

请参考以下教程：CSS位置，CSS层。

相关属性：position，left，right，bottom，z-index。

CSS3 transform 属性CSS text-transform 属性