就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. CSS
  3. top

在此页

top CSS property participates in specifying the vertical position of a positioned element . It has no effect on non-positioned elements.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

The effect of top depends on how the element is positioned (i.e., the value of the position property):

  • When position is set to absolute or fixed ， top property specifies the distance between the element's top edge and the top edge of its containing block.
  • When position is set to relative ， top property specifies the distance the element's top edge is moved below its normal position.
  • When position is set to sticky ， top property is used to compute the sticky-constraint rectangle.
  • When position is set to static ， top property has no effect .

When both top and bottom are specified, position is set to absolute or fixed , and height is unspecified (either auto or 100% ) both the top and bottom distances are respected. In all other situations, if height is constrained in any way or position is set to relative ， top property takes precedence and the bottom property is ignored.

句法 

/* <length> values */
top: 3px;
top: 2.4em;
/* <percentage>s of the height of the containing block */
top: 10%;
/* Keyword value */
top: auto;
/* Global values */
top: inherit;
top: initial;
top: unset;

值

<length>
A negative, null, or positive <length> that represents:
  • for absolutely positioned elements , the distance to the top edge of the containing block.
  • for relatively positioned elements , the distance that the element is moved below its normal position.
<percentage>
A <percentage> of the containing block's height.
auto
Specifies that:
  • for absolutely positioned elements , the position of the element is based on the bottom property, while height: auto is treated as a height based on the content; or if bottom is also auto , the element is positioned where it should vertically be positioned if it were a static element.
  • for relatively positioned elements , the distance of the element from its normal position is based on the bottom property; or if bottom is also auto , the element is not moved vertically at all.
inherit
Specifies that the value is the same as the computed value from its parent element (which might not be its containing block). This computed value is then handled as if it were a <length> , <percentage> ，或 auto 关键词。

形式定义

初始值 auto
适用于 positioned elements
继承 no
百分比 refer to the height of the containing block
计算值 if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
动画类型 a length , percentage or calc();

形式句法 

<length> | <percentage> | auto

范例

A positioned element set 10% from the top 

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>

规范

规范 状态 注释
CSS Positioned Layout Module Level 3
The definition of 'top' in that specification. 		工作草案 Adds behavior for sticky positioning.
CSS Level 2 (Revision 1)
The definition of 'top' in that specification. 		推荐 初始定义。

浏览器兼容性

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. 更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
top Chrome 完整支持 1 Edge 完整支持 12 Firefox 完整支持 1 IE 完整支持 5 注意事项
完整支持 5 注意事项
注意事项 In Internet Explorer versions before 7, when both top and bottom are specified, the element position is overconstrained and the top property has precedence; the computed value of bottom is set to -top , while its specified value is ignored.
Opera 完整支持 6 Safari 完整支持 1 WebView Android 完整支持 ≤37 Chrome Android 完整支持 18 Firefox Android 完整支持 4 Opera Android 完整支持 14 Safari iOS 完整支持 1 Samsung Internet Android 完整支持 1.0

图例

完整支持

完整支持

见实现注意事项。

见实现注意事项。

另请参阅

元数据

  • 最后修改：
  1. CSS
  2. CSS 参考
  3. CSS Positioning
  4. 指南
    1. Understanding CSS z-index
  5. 特性
    1. bottom
    2. clear
    3. float
    4. left
    5. position
    6. right
    7. top
    8. z-index