CSS中的bottom属性用于设置定位元素的底部位置。它指定元素的下边缘与其包含元素的下边缘之间的距离。
根据position属性的值，确定bottom属性的效果。
| 位置值 | 底部属性 |
|---|---|
| 绝对或固定 | 指定元素下边缘的外边距与容器下边缘的内边框之间的距离。 |
| relative | 指定元素底部边缘移动到其正常位置之上的距离。 |
| sticky | 用于计算粘性约束矩形。 |
| 静态 | 对元素没有影响。 |
当同时指定顶部和底部值时，将考虑顶部和底部距离，位置设置为absolute或fixed，高度为100%或auto。
当高度受到约束或位置设置为相对时，顶部值优先，底部值被忽略。
属性值
<length>: 可以指定负值、空值或正值。
<percentage>: 容器高度的百分比。
auto: 默认值。浏览器计算底部位置。
适用范围
所有 HTML 定位元素。
DOM 语法
object.style.bottom = "2px"; CSS 底部: 使用绝对位置
这是一个位置示例:绝对位置和底部具有不同的值（自动、百分比、长度） -
<html>
<head>
<style>
div.blockbottompostion {
bottom: 10%;
background-color: yellow;
position: absolute;
height: 100px;
border: 3px solid rgb(12, 5, 62);
}
</style>
</head>
<body>
<h1>The bottom Property</h1>
<p>This<br />is<br />tutorialspoint<br />site,<br />and,<br />has,<br />many,<br />many<br />courses.
</p>
<p>This<br />site<br />has<br />abundant,<br />material,<br />on,<br />all,<br />skills.
</p>
<div class="blockbottompostion">Position:absolute bottom:10%</div>
</body>
</html> CSS 底部: 使用相对位置位置
这是一个位置示例:相对和底部具有不同的值（自动、百分比、长度）-
<html>
<head>
<style>
div.blockbottompostion {
bottom: 10%;
background-color: yellow;
position: relative;
height: 100px;
border: 3px solid rgb(12, 5, 62);
}
</style>
</head>
<body>
<h1>The bottom Property</h1>
<p>This<br />is<br />tutorialspoint<br />site,<br />and,<br />has,<br />many,<br />many<br />courses.
</p>
<p>This<br />site<br />has<br />abundant,<br />material,<br />on,<br />all,<br />skills.
</p>
<div class="blockbottompostion">Position:relative bottom:10%</div>
</body>
</html> CSS 底部: 固定位置
这是一个位置:固定和底部具有不同值（自动，百分比，长度）的示例 -
<html>
<head>
<style>
div.blockbottompostion {
bottom: 10%;
background-color: yellow;
position: fixed;
height: 100px;
border: 3px solid rgb(12, 5, 62);
}
</style>
</head>
<body>
<h1>The bottom Property</h1>
<p>This<br />is<br />tutorialspoint<br />site,<br />and,<br />has,<br />many,<br />many<br />courses.
</p>
<p>This<br />site<br />has<br />abundant,<br />material,<br />on,<br />all,<br />skills.
</p>
<div class="blockbottompostion">Position:fixed bottom:10%</div>
</body>
</html> CSS 底部: 具有粘性位置
这里是一个位置:粘性的示例和底部具有不同的值（自动、百分比、长度）-
<html>
<head>
<style>
div.blockbottompostion {
bottom: 10%;
background-color: yellow;
position: sticky;
height: 100px;
border: 3px solid rgb(12, 5, 62);
}
</style>
</head>
<body>
<h1>The bottom Property</h1>
<p>This<br />is<br />tutorialspoint<br />site,<br />and,<br />has,<br />many,<br />many<br />courses.
</p>
<p>This<br />site<br />has<br />abundant,<br />material,<br />on,<br />all,<br />skills.
</p>
<div class="blockbottompostion">Position:sticky bottom:10%</div>
</body>
</html> CSS 底部: 具有静态位置
这是一个位置:静态和底部具有不同值（自动、百分比，长度）−
<html>
<head>
<style>
div.blockbottompostion {
bottom: 10%;
background-color: yellow;
position: static;
height: 100px;
border: 3px solid rgb(12, 5, 62);
}
</style>
</head>
<body>
<h1>The bottom Property</h1>
<p>This<br />is<br />tutorialspoint<br />site,<br />and,<br />has,<br />many,<br />many<br />courses.
</p>
<p>This<br />site<br />has<br />abundant,<br />material,<br />on,<br />all,<br />skills.
</p>
<div class="blockbottompostion">Position:static bottom:10%</div>
</body>
</html>