css+bottom等 |css参考手册最新版

.box {
position: absolute;
bottom: 0;
width: 300px;
height: 200px;
background-color: #ccc;
}

上面的代码中，.box 是一个绝对定位的元素，宽度为 300px，高度为 200px，背景色为 #ccc。由于设置了 bottom: 0，因此 .box 将紧贴其容器底部。

如果想让元素通过动画链接底部的位置变化，可以使用 CSS 的 transition 属性。

.box {
position: absolute;
bottom: 0;
width: 300px;
height: 200px;
background-color: #ccc;
transition: bottom .3s ease-in-out;
}
.box:hover {
bottom: 20px;
}

上面的代码中，在 .box 上设置了 transition 属性，当 hover .box 时，bottom 属性将从 0 变为 20px，变化时间为 0.3 秒，变化方式为 ease-in-out 缓动。

bottom 还可用于自适应底部固定栏的实现。

.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
}

上面的代码中，.footer 是一个固定定位的元素，宽度为 100%，高度为 50px。由于设置了 bottom: 0，因此 .footer 将固定在页面底部。