top - CSS（层叠样式表） 编辑

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

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

/* 参照于包含块高度的百分比 */
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的时候，top和bottom​​​​​都会生效，在其他情况下，如果 height被限制，则top属性会优先设置，bottom属性则会被忽略。

语法

取值

<length>

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

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

<percentage>

代表元素包含块的高度的百分比 <percentage>。

auto

这个关键字表示:

• 对于绝对定位元素，元素将忽略此属性已bottom属性为准，如果此时设置height: auto，将基于内容需要的高度设置高度；如果bottom也为auto的话，元素的垂直位置就是它假如作为静态(即static)元素时该在的位置。
• 对于相对定位元素，元素相对正常位置的偏移量将基于bottom属性；如果bottom也为auto的话，元素将不会有偏移。

inherit

这个关键字表示该值与其父元素 (可能不是它的包含块) 的计算值相同。对这个计算值的处理将和它原本为 <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>

​​​​​​

规范

浏览器兼容性

BCD tables only load in the browser

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.