CSS bottom属性介绍

CSS bottom属性用于设置元素相对于其父元素底部边缘的偏移量。它可用于绝对定位元素的水平和垂直定位。

语法

selector {
  bottom: auto|length|initial|inherit;
}

• auto：表示使用默认值，即元素处于正常文档流时其底部与父元素最下边缘保持一定距离。
• length：表示元素底部与父元素底部边缘的距离，可为负值。常用单位有px、em、rem等。
• initial：表示将属性设置为其初始值。
• inherit：表示继承父元素的bottom属性值。

示例

1. 底部距离父元素底部5px

.container {
  position: relative;
}
.box {
  position: absolute;
  bottom: 5px;
}

2. 底部距离父元素底部50%

.container {
  position: relative;
  height: 200px;
}
.box {
  position: absolute;
  bottom: 50%;
  transform: translateY(50%);
}

3. 底部距离父元素底部自适应

.container {
  position: relative;
  height: 200px;
}
.box {
  position: absolute;
  bottom: 0;
  top: 50px;
}

注意事项

• bottom属性只对position属性值为absolute、fixed、sticky的元素生效。
• 当bottom值为负数时，元素会超出其父元素的底部边缘，注意避免出现滚动条。
• 当bottom值为百分比时，它是相对于父元素的height计算的，而非整个可视区域高度。因此，父元素需要有明确的高度值。

以上就是CSS bottom属性的介绍。