bottom
bottom样式属性定义了定位元素下外边距边界与其包含块下边界之间的偏移,非定位元素设置此属性无效。
示例
/* <length> values */ bottom: 3px; bottom: 2.4em; /*s of the height of the containing block */ bottom: 10%; /* Keyword value */ bottom: auto; /* Global values */ bottom: inherit; bottom: initial; bottom: unset;
浏览器支持
![]() |
![]() |
![]() |
![]() |
![]() |
浏览器都支持
bottom
|
语法
bottom : auto | inherit | <length> | <percentage>
- 对于绝对定位的元素,元素下外边距边界与其包含块下边界之间的偏移。
- 对于相对定位定位的元素,元素的下边界离开其正常位置的偏移。
bottom的效果取决于元素的position属性:
-
当position设置为
absolute
或
fixed
时,
bottom
属性指定了定位元素下外边距边界与其包含块下边界之间的偏移。 -
当position设置为
relative
时,
bottom
属性指定了元素的下边界离开其正常位置的偏移。 -
当position设置为
sticky
时,如果元素在viewport里面,
bottom
属性的效果和position:relative
等同;如果元素在viewport外面,bottom
属性的效果和position:fixed
等同。 -
当position设置为
static
时,
bottom
属性无效。
当
top
和
bottom
同时指定时,并且
height
没有被指定或者指定为
auto
或
100%
的时候,
top
和
bottom
都会生效,在其他情况下,如果
height
被限制,则
top
属性会优先设置,
bottom
属性则会被忽略。
取值
-
auto
:这个关键字表示:
-
对于绝对定位元素,元素将忽略此属性而以top属性为准,如果此时设置
height:auto
,将基于内容需要的高度设置宽度;如果top:auto
的话,元素的垂直位置就是它假如作为静态(即static)元素时该在的位置。 -
对于相对定位元素,元素相对正常位置的偏移量将基于top属性;如果
top:auto
的话,元素将不会有偏移。
-
对于绝对定位元素,元素将忽略此属性而以top属性为准,如果此时设置
-
inherit
:指代有明确计算结果的父级元素的值,(需要注意的是,父级元素并不一定是包裹该子元素的块级元素)。该值会根据父级元素的具体情况被处理为
<length>
,<percentage>
或 auto 一样。 -
<length>
:一个负值、正值或
null
。
- 对于绝对定位的元素,元素右外边距边界与其包含块右边界之间的偏移。
- 对于相对定位定位的元素,元素的右边界离开其正常位置的偏移。
-
<percentage>
:代表元素包含块的高度的百分比
<percentage>
。
实例
p { font-size: 30px; line-height: 2em; } div { width: 48%; text-align: center; background: rgba(55,55,55,.2); border: 1px solid blue; } .absolute { position: absolute; bottom: 0; left: 0; } .fixed { position: fixed; bottom: 0; right: 0; } <p>This<br>is<br>some<br>tall,<br>tall,<br>tall,<br>tall,<br>tall<br>content.</p> <div class="fixed"><p>Fixed</p></div> <div class="absolute"><p>Absolute</p></div>