#top

#介绍

top 属性定义了定位元件的上外边距边界与其包含块上边界之间的偏移。定位元件参考 position 属性。

top 的效果取决于元件的 position 属性：

• 当 position 设置为 absolute 或 fixed 时，top 属性指定了定位元件上外边距边界与其包含块上边界之间的偏移。

• 当 position 设置为 relative 时，top 属性指定了元件的上边界离开其正常位置的偏移。

当 top 和 bottom 同时指定时，position 设置为 absolute/fixed，并且 height 没有被指定或者指定为 auto 或 100% 的时候，top 和 bottom 都会生效，在其他情况下，如果 height 被限制，则 top 属性会优先设置，bottom 属性则会被忽略。

#使用示例

css-apisrc/top/App.tsx

预览

#语法

/* <length> */
top: 3px;
top: 2rpx;
top: 2.4em;
top: 3rem;

top: 10%;
/* Keyword value */
top: auto;

top: calc(1px + 1px);

#取值

#auto

默认值。

#<length>

可以是负的，正的或者 null <length> 表示：

• 对于绝对定位的元件，元件下外边距边界与其包含块下边界之间的偏移。

• 对于相对定位定位的元件，元件的下边界离开其正常位置的偏移。

#<percentage>

包含块高度的百分比 <percentage>。

#形式定义

#与 Web 的区别

mdn: top

#兼容性

LCD tables only load in the browser