将定位的 <div> 元素的上边缘设置为距离其最近的定位祖先的上边缘向下 50px:
div {
position: absolute;
top: 50px;
border: 3px solid green;
}
亲自试一试 »
下面有更多 "亲自试一试" 示例。
这个top
属性影响定位元素的垂直位置。此属性对非定位元素没有影响。
top
属性将元素的上边缘设置为其最近定位祖先的上边缘上方/下方的单位。top
属性使元素的顶部边缘移动到其正常位置的上方/下方。top
当元素位于视口内时,属性的行为就像其位置是相对的,而当元素位于视口外时,其位置就像是固定的。top
属性没有影响。表中的数字指定完全支持该属性的第一个浏览器版本。
Property | |||||
---|---|---|---|---|---|
top | 1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
top: auto|
length|initial|inherit;
Value | Description | Demo |
---|---|---|
auto | Lets the browser calculate the top edge position. This is default | Demo ❯ |
length | Sets the top edge position in px, cm, etc. Negative values are allowed. Read about length units | Demo ❯ |
% | Sets the top edge position in % of containing element. Negative values are allowed | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
对于没有定位祖先的元素,使用带有负值的 top 属性:
div.b {
position: absolute;
top: -20px;
border: 3px solid blue;
}
div.c {
position: absolute;
top: 150px;
border: 3px solid green;
}
亲自试一试 »
CSS教程:CSS定位
CSS 参考:底部属性
CSS 参考:留下属性
CSS 参考:权利属性
HTML DOM 参考:顶级属性
截取页面反馈部分,让我们更快修复内容!也可以直接跳过填写反馈内容!