top
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
top
样式属性定义了定位元素的上外边距边界与其包含块上边界之间的偏移,非定位元素设置此属性无效。
css
/* <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
-
这个关键字表示:
inherit
-
这个关键字表示该值与其父元素 (可能不是它的包含块) 的计算值相同。对这个计算值的处理将和它原本为
<length>
,<percentage>
或auto
一样。
示例
css
body {
background: beige;
}
div {
position: absolute;
top: 10%;
right: 40%;
bottom: 20%;
left: 15%;
background: gold;
border: 1px solid blue;
}
html
<div>The size of this content is determined by the position of its edges.</div>
规范
Specification |
---|
CSS Positioned Layout Module Level 3 # insets |
浏览器兼容性
BCD tables only load in the browser