CSS参考手册
动画和转换 | Animations & Transitions
上边距 | 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
属性则会被忽略。
初始值 |
auto |
---|---|
适用元素 |
positioned elements |
是否是继承属性 |
no |
Percentages |
refer to the height of the containing block |
适用媒体 |
visual |
计算值 |
if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto |
Animation type |
a length, percentage or calc(); |
正规顺序 |
the unique non-ambiguous order defined by the formal grammar |
语法
值
<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>
规范
Specification |
Status |
Comment |
---|---|---|
CSS TransitionsThe definition of 'top' in that specification. |
Working Draft |
Defines top as animatable. |
CSS Level 2 (Revision 1)The definition of 'top' in that specification. |
Recommendation |
Initial definition. |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
---|---|---|---|---|---|---|
Basic support |
(Yes) |
(Yes) |
1.0 (1.7 or earlier) |
(Yes)1 |
(Yes) |
(Yes) |
Feature |
Android |
Chrome for Android |
Edge |
Firefox Mobile (Gecko) |
IE Mobile |
Opera Mobile |
Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support |
? |
? |
(Yes) |
? |
?1 |
? |
? |
在Internet Explorer7.0版本以前,当top
和bottom
都被指定时,元素位置被过度约束且top
属性优先:bottom
的计算值被设置为-top
,而其指定值被忽略。
另见
-
position
,bottom
,left
,right
动画和转换 | Animations & Transitions相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。