上边距 | top

top

top样式属性定义了定位元素的上外边距边界与其包含块上边界之间的偏移，非定位元素设置此属性无效。

/* <length> values */
top: 3px;
top: 2.4em;

/* <percentages> of the height of the containing block */
top: 10%;

/* Keyword value */
top: auto;

/* Global values */
top: inherit;
top: initial;
top: unset;

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

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

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

• 当position设置为sticky时，如果元素在viewport里面，top属性的效果和position为relative等同；如果元素在viewport外面，top属性的效果和position为fixed等同。

• 当position设置为static时，top属性无效。

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

语法

值

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

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

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

<percentage>代表元素包含块的高度的百分比 <percentage>。auto这个关键字表示:

• 对于绝对定位元素，元素将忽略此属性已 bottom 属性为准，如果此时设置 height: auto ，将基于内容需要的高度设置高度。

• 对于相对定位元素，元素相对正常位置的偏移量将基于 bottom 属性，如果 bottom 也为 auto的话，元素将不会有偏移。

inherit这个关键字表示该值与其父元素 (可能不是它的包含块) 的计算值相同。对这个计算值的处理将和它原本为<length>，<percentage>或auto一样。

形式化语法

<length> | <percentage> | auto

示例

body {
  background: beige;
}

div {
  position: absolute;
  top: 10%;
  right: 40%;
  bottom: 20%;
  left: 15%;
  background: gold;
  border: 1px solid blue;
}

<div>The size of this content is determined by the position of its edges.</div>

规范

浏览器兼容性

在Internet Explorer7.0版本以前，当top和bottom都被指定时，元素位置被过度约束且top属性优先：bottom的计算值被设置为-top，而其指定值被忽略。

另见

• position，bottom，left，right