CSS bottom 属性

CSS bottom 属性定义了定位元素下外边距边界与其包含块下边界之间的偏移，非定位元素设置此属性无效。

实例

把图像的底边缘设置在其包含元素底边缘之上 5 像素高的位置：

<html>
<head>
<style type="text/css">
img.ex1
{
position:absolute;
bottom:0px;
}
img.ex2
{
position:relative;
bottom:-100px;
}
</style>
</head>
<body>
<img class="ex1" src="/images/demo.png">
<h1>This is a heading</h1>
<img class="ex2" src="/images/demo.png">
</body>
</html>

运行一下

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

属性
content	1.0	5.0	1.0	1.0	6.0

定义和用法

bottom 属性规定元素的底部边缘。该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移。

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 属性则会被忽略。

对于相对定义元素，如果 bottom 和 top 都是 auto，其计算值则都是 0；如果其中之一为 auto，则取另一个值的相反数；如果二者都不是 auto，bottom 将取 top 值的相反数。

默认值：	auto
继承性：	no
版本：	CSS2
JavaScript 语法：	object.style.bottom="50px"

可能的值

值	描述
auto	默认值。通过浏览器计算底部的位置。
%	设置以包含元素的百分比计的底边位置。可使用负值。
length	使用 px、cm 等单位设置元素的底边位置。可使用负值。
inherit	规定应该从父元素继承 bottom 属性的值。

CSS bottom 属性

实例

浏览器支持

定义和用法

可能的值

相关页面

分类导航