底部

**bottom** CSS 属性参与设置 定位元素 的垂直位置。此 内边距属性 对非定位元素没有影响。

试一试

bottom 的效果取决于元素的定位方式（即 position 属性的值）。

  • 当 position 设置为 absolute 或 fixed 时，bottom 属性指定元素的 底部边距 的外边缘与包含块的底部填充的外边缘之间的距离，或者，在使用 anchor() 函数在值中时，相对于指定 <anchor-side> 边缘的位置，对于 锚点定位的元素。bottom 属性与 top、bottom、start、end、self-start、self-end、center 和 <percentage> 值兼容。
  • 当 position 设置为 relative 时，bottom 属性指定元素的底部边缘在其正常位置上方移动的距离。
  • 当 position 设置为 sticky 时，bottom 属性用于计算粘性约束矩形。
  • 当 position 设置为 static 时，bottom 属性没有效果。

当同时指定 top 和 bottom 时，position 设置为 absolute 或 fixed，并且 height 未指定（auto 或 100%），top 和 bottom 距离都会被尊重。在所有其他情况下，如果 height 以任何方式受到约束或 position 设置为 relative，则 top 属性优先，而 bottom 属性将被忽略。

语法

css
/* <length> values */
bottom: 3px;
bottom: 2.4em;
bottom: anchor(top);
bottom: calc(anchor(--myAnchor 50%) + 5px);

/* <percentage>s of the height of the containing block */
bottom: 10%;

/* Keyword value */
bottom: auto;

/* Global values */
bottom: inherit;
bottom: initial;
bottom: revert;
bottom: revert-layer;
bottom: unset;

Values

<length>

一个负、空或正 <length>，表示

  • 对于绝对定位元素，到包含块底部边缘的距离。
  • 对于相对定位元素，元素在其正常位置上方移动的距离。
  • 对于 锚定定位元素，anchor() 函数解析为相对于关联的锚定元素的顶部或底部边缘位置的 <length> 值。
<percentage>

包含块高度的 <percentage>。

auto

指定

  • 对于绝对定位元素，元素的位置基于 top 属性，而 height: auto 被视为基于内容的高度；或者如果 top 也是 auto，则元素将放置在它应该垂直放置的位置，就好像它是一个静态元素。
  • 对于锚定定位元素，anchor() 函数中的百分比指定元素内容沿块轴线从开始位置的距离，以百分比表示。
  • 对于相对定位元素，元素与其正常位置的距离基于 top 属性；或者如果 top 也是 auto，则元素根本不会垂直移动。
inherit

指定该值与其父元素（可能不是其包含块）的计算值相同。然后将此计算值处理为 <length>、<percentage> 或 auto 关键字。

正式定义

初始值auto
应用于定位元素
继承否
百分比指包含块的高度
计算值如果指定为长度，则为相应的绝对长度；如果指定为百分比，则为指定的值；否则为 auto。
动画类型长度、百分比 或 calc()；

正式语法

bottom = 
  auto                 |
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>

示例

绝对和固定定位

此示例演示了当 position 为 absolute 与 fixed 时，bottom 属性的行为差异。

HTML

html
<p>
  This<br />is<br />some<br />tall,<br />tall,<br />tall,<br />tall,<br />tall<br />content.
</p>
<div class="fixed"><p>Fixed</p></div>
<div class="absolute"><p>Absolute</p></div>

CSS

css
p {
  font-size: 30px;
  line-height: 2em;
}

div {
  width: 48%;
  text-align: center;
  background: rgb(55 55 55 / 20%);
  border: 1px solid blue;
}

.absolute {
  position: absolute;
  bottom: 0;
  left: 0;
}

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

结果

规范

规范
CSS 定位布局模块第 3 级
# 内边距

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅