CSS bottom属性结合位置属性指定元素的底部位置。
根据元素的定位方式，bottom 属性的效果可能会有所不同。
- 当元素的定位是“相对（relative）”、“绝对（absolute）”、“固定（fixed）”或者“粘性（sticky）”时，bottom值起着很大的作用。
- 当位置“固定（fixed）”时，元素相对于屏幕的视口，滚动时保持固定在屏幕上。
- 当它是“absolute”时，元素的位置将绝对相对于它的容器。
- 当位置为“相对（relative）”时，它使元素的底部边缘移动到其正常位置的上方/下方。
- 在“粘性（sticky）”位置的情况下，当元素在视口内时，元素位置是相对的，就像在外面时它的位置是固定的一样。
| 初始值 | auto |
|---|---|
| 应用于 | 所有元素。它也适用于::first-letter。 |
| 继承 | 无效 |
| 可动画的 | 底部位置可以设置动画。 |
| 版本 | CSS2 |
| DOM 语法 | object.style.bottom=“10px”； |
CSS bottom 属性值说明
| 值 | 说明 |
|---|---|
| auto | 这是默认值。它允许浏览器计算底部边缘位置。 |
| percentage | 以包含块高度的百分比定义元素的位置。 |
| length | 定义元素在px、cm等中的位置。允许负值。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
语法
bottom: auto | length | initial | inherit;
底部属性bottom示例：
<!DOCTYPE html>
<html>
<head>
<style>
div.parent {
position: relative;
height: 300px;
width: 80%;
border: 3px solid #8ebf42;
}
div.absolute {
position: absolute;
width: 50%;
bottom: 10px;
border: 3px solid #8ebf42;
}
</style>
</head>
<body>
<h2>Bottom 属性示例</h2>
<div class="parent">
将div的position设置为relative.
<div class="absolute">这个 div 的底边放置在包含元素底边上方 10 个像素处，并且位置设置为绝对。</div>
</div>
</body>
</html>
包含所有位置的底部属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
div.parent {
position: relative;
height: 180px;
border: 3px solid #8AC007;
}
div.absolute {
position: absolute;
width: 50%;
bottom: 20px;
border: 3px solid #8AC007;
}
div.relative {
position: relative;
width: 50%;
bottom: 2px;
border: 3px solid #8AC007;
}
div.fixed {
position: fixed;
width: 50%;
bottom: 50px;
border: 3px solid #8AC007;
}
div.sticky {
position: sticky;
width: 50%;
bottom: 10px;
border: 3px solid #8AC007;
}
</style>
</head>
<body>
<h2>Bottom 属性示例</h2>
<div class="parent">
此 div 元素具有位置：相对。
<div class="absolute">位置：绝对和底部 20px
<br>此 div 的底部边缘位于包含元素底部边缘上方 20 像素处。</div>
</div>
<br>
<div class="parent">
此 div 元素具有position: relative.
<div class="relative">位置：相对和底部 2px
<br>此 div 的底部边缘位于其正常位置上方 2 个像素处。</div>
</div>
<br>
<div class="fixed">位置：固定和底部 50px
<br>此 div 的底部边缘位于距视口底部 50 像素处。</div>
<div class="parent">
此 div 元素具有 position: relative.
<div class="sticky">位置：粘性和底部 10px
<br>这个div是sticky</div>
</div>
</body>
</html>
日期：2020-06-02 22:14:20 来源：oir作者：oir