CSS - 底部属性：掌握元素定位
你好，未来的 CSS 大师们！今天，我们将深入探索 CSS bottom 属性的迷人世界。作为你友好的计算机科学老师，我将在这一旅程中逐步引导你。所以，拿起你最喜欢的饮料，舒舒服服地坐好，让我们一起踏上这个激动人心的冒险！
CSS bottom 属性是什么？
在我们深入了解之前，让我们从基础开始。CSS bottom 属性就像一根魔杖，允许你从其包含元素的底部定位元素。它是 CSS 定位工具包的一部分，与 top、left 和 right 属性协同工作。
把它想象成给你的 HTML 元素一组坐标，告诉它们在网页上应该坐哪里。这就像玩数字俄罗斯方块游戏，但不是掉落的方块，而是在排列网页元素！
可能的值
现在，让我们看看 bottom 属性可以采取的不同值。这就像从定位选项菜单中选择：
| 值 | 描述 |
|---|---|
| auto | 浏览器计算底部位置 |
| 长度 | 指定以 px、pt、cm 等单位的底部位置 |
| % | 指定包含元素底部位置的百分比 |
| inherit | 从父元素继承值 |
| initial | 将此属性设置为默认值 |
让我们通过一些代码示例来看看这些：
/* 使用像素值 */
.box1 {
bottom: 20px;
}
/* 使用百分比 */
.box2 {
bottom: 10%;
}
/* 使用 'auto' */
.box3 {
bottom: auto;
}在上述示例中，box1 将从底部定位 20 像素，box2 将从其容器的底部定位 10%，而 box3 将让浏览器决定其底部位置。
应用范围
bottom 属性并不是一刀切解决方案。它只在具有指定位置值的元素上发挥作用。让我们看看它适用于以下定位类型：
- 绝对
- 相对
- 固定
- 粘性
我们稍后会详细探讨每一个。但是记住，bottom 不会影响静态定位的元素（默认定位）。
DOM 语法
对于那些喜欢用 JavaScript 亲手操作的人来说，以下是如何使用文档对象模型（DOM）操纵 bottom 属性的方法：
object.style.bottom = "20px"这行代码会将元素的 bottom 属性设置为 20 像素。就像从底部轻轻推一下你的元素！
CSS bottom - 与绝对定位一起使用
现在，让我们深入了解不同的定位类型，从绝对定位开始。当一个元素被绝对定位时，它会被移出正常的文档流，并相对于最近的定位祖先元素定位。
.parent {
position: relative;
height: 200px;
background-color: #f0f0f0;
}
.child {
position: absolute;
bottom: 20px;
right: 20px;
background-color: #ff9900;
padding: 10px;
}<div class="parent">
<div class="child">我是绝对定位的！</div>
</div>在这个例子中，子元素将从其父容器的底部和右侧定位 20 像素。就像给你的元素在网页剧场的特定座位上安排位置！
CSS bottom - 与相对定位一起使用
相对定位有所不同。元素相对于其正常位置定位，其他元素会围绕它调整。
.box {
position: relative;
bottom: 30px;
background-color: #00ff00;
padding: 10px;
}<div class="box">我是相对定位的！</div>这个绿色框将从其正常位置向上移动 30 像素。就像告诉你的元素，“往上移一点，但保持你的位置！”
CSS bottom - 与固定定位一起使用
固定定位就像给你的元素一个永久的 VIP 通行证。即使页面滚动，它也会停留在同一位置。
.header {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #333;
color: white;
padding: 10px;
}<div class="header">我是一个固定的底部！</div>这会创建一个始终粘在视口底部的页脚，无论你滚动多少，它都始终可见。这对于你希望始终保持可访问的重要信息或导航非常完美。
CSS bottom - 与粘性定位一起使用
粘性定位是新的孩子。它是相对定位和固定定位的混合体。元素被视为相对定位，直到它达到指定的阈值，然后它变成固定定位。
.sticky-note {
position: sticky;
bottom: 20px;
background-color: #ffff00;
padding: 10px;
}<div class="sticky-note">我是一个粘性便签！</div>这个黄色粘性便签将随着页面滚动，直到它距离视口底部 20 像素，然后它会粘在那里。就像你网页上的一个数字便签！
CSS bottom - 与静态定位一起使用
最后但同样重要的是，让我们谈谈静态定位。这是所有元素的默认定位，但这里有陷阱 - bottom 属性对静态定位的元素没有任何效果！
.static-box {
position: static;
bottom: 50px; /* 这将没有任何效果 */
background-color: #ff00ff;
padding: 10px;
}<div class="static-box">我是静态定位的！</div>在这个例子中，尽管我们设置了一个 bottom 值，粉色框还是不会从其在文档流中的正常位置移动。就像试图移动一座山 - 它就是不会发生！
就这样，伙计们！我们已经穿越了 CSS 定位的领域，探索了 bottom 属性的所有荣耀。记住，掌握 CSS 定位就像学习跳舞 - 它需要练习，但一旦你掌握了节奏，你就可以创建出美丽、和谐的布局，让你的网页唱歌！
继续实验，继续学习，最重要的是，享受其中的乐趣。毕竟，网页开发既是艺术，也是科学。祝未来的 CSS 大师们编码愉快！
Credits: Image by storyset