bottom 底部偏移属性

最后更新：2026-09-13

bottom bottom 底部偏移属性

bottom 属性用于定义定位元素从其包含块底部边缘向上的偏移量。它仅对非 static 的定位元素生效，常与 absolute、fixed 定位配合，实现从底部进行定位或拉伸元素高度的效果。

分类
初始值	auto
继承	否
适用于
可动画
CSS 版本	CSS2
状态	标准

📝 语法

bottom: auto | <length> | <percentage>;

⚙️ 取值

值	类型	描述
`auto`	关键字	无偏移
`<length> \| <percentage>`	类型	相对包含块底边缘偏移

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
bottom	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

注意： bottom 仅对非 static 的定位元素生效，对 position: static 的元素无效。

提示： 百分比值相对于包含块的高度计算。同时设置 top 和 bottom（且不设置 height）可让元素在垂直方向上拉伸填满空间。

❓ 常见问题

Q同时设置 top 和 bottom 会怎样？

Aabsolute/fixed 定位且不设置 height 时，元素高度会被拉伸填满 top 与 bottom 之间的空间，实现垂直方向自适应拉伸；若设置了 height，则 top 生效、bottom 被忽略。relative 定位时 top 优先。这类技巧常用于实现通栏背景层、底部吸附栏与顶部对齐之间的弹性区域。

Qbottom 的百分比是相对于谁的？

Abottom 的百分比相对于包含块的高度计算。absolute 元素的包含块是最近定位祖先的 padding box，fixed 元素是视口，relative 元素相对自身原始位置。例如 bottom:0 表示元素底边与包含块底边对齐，配合 left:0; right:0 可让元素贴住底部并横向撑满。

Q如何实现固定在底部的按钮或工具栏？

A固定在视口底部：position:fixed; bottom:0; left:0; right:0，滚动不移动（主体需留 padding-bottom 防遮挡）。固定在容器底部：父容器 position:relative，子元素 position:absolute; bottom:0; left:0; right:0。

Qbottom 和 top 哪个优先级更高？

A当元素设置了 height 时，top 优先、bottom 被忽略（LTR 垂直方向默认 top 优先）；不设 height 时，top 和 bottom 一起决定元素高度（拉伸填满）。这与水平方向 left/right 的规则类似。需要精确控制时建议只设置其中一方，避免行为与预期不符。