CSS 中的 bottom 属性用于设置定位元素的底部位置。它指定元素的底部边缘与其包含元素的底部边缘之间的距离。
根据位置属性的值，确定底部属性的效果。
| 属性值 | Bottom 描述 |
|---|---|
| absolute or fixed | 指定元素的下边缘的外边距与容器下边缘的内边框之间的距离。. |
| relative | 指定元素的底部边缘在其正常位置上方移动的距离。. |
| sticky | 用于计算粘性约束矩形。 |
| static | 对元素没有影响。 |
当同时指定了 top 和 bottom 值时，将位置设置为绝对或固定，并且高度为 100% 或自动时，将尊重top和 bottom 距离。
当高度受到约束或位置设置为相对时，top值优先，而 bottom 值将被忽略。
可能的值
- <length> - 可以指定负值、空值或正值。
- <percentage> - 容器高度的百分比。
- auto − 默认值。浏览器计算底部位置。
适用于
所有 HTML 定位的元素。
DOM 语法
object.style.bottom = "2px";
CSS bottom - 具有绝对位置
这是一个示例，position：absolute 和 bottom 具有不同的值（自动、百分比、长度） -
<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 bottom - 具有相对位置
下面是一个示例，position：relative 和 bottom 具有不同的值（auto、percent、length）-
<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 bottom - 具有固定位置
下面是一个示例，position：fixed 和 bottom 具有不同的值（auto、percent、length）-
<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 bottom - 具有粘性位置
这是一个示例，position：sticky 和 bottom 具有不同的值（自动、百分比、长度）-
<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 bottom - 具有静态位置
这是一个示例，position：static 和 bottom 具有不同的值（auto、percent、length）-
<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>
