CSS top 属性使用方法及示例

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

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

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

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

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

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

top的使用语法

该属性的语法如下：

top: length | percentage | auto | initial | inherit

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

  p {
   position: absolute;
   top: 150px;
  }

属性值

下表描述了此属性的值。

浏览器兼容性

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

Firefox 1+ Google Chrome1+ Internet Explorer 4+ Apple Safari 1+ Opera 6+

进一步阅读

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

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