CSS bottom property

CSS 中的 bottom 属性用于指定垂直定位元素的底部位置。它不会影响非定位元素。它是四个偏移属性之一，另外三个是 left、right 和 top。

此属性的效果取决于相应元素的位置，即 position 属性的值。当 position 属性设置为 static 值时，bottom 属性无效。

语法

属性值

此属性的值定义如下：

auto：这是默认值。它允许浏览器计算底部边缘的位置。

length：此值以 px、cm、pt 等定义 bottom 属性的位置。它允许负值。

percentage：此值以百分比 (%) 定义 bottom 属性的位置。它相对于元素包含块的高度进行计算。它也允许负值。

**初始：**它将属性设置为其默认值。

inherit： 它继承父元素的属性。

此属性对 **static（静态）** 值以外的定位元素的效果如下：

• 当元素是固定定位或绝对定位时（即 position: fixed; 和 position: absolute;），bottom 属性指定元素底部边缘与其包含块（元素相对定位到的祖先元素）的底部边缘之间的距离。
• 如果元素是相对定位（即 position: relative;），则 bottom 属性会将元素顶部边缘在其正常位置上方/下方移动。
• 如果 position 设置为 sticky，即 position: sticky;，则定位上下文是视口。当元素在视口内时，bottom 属性的行为就像其位置是相对的。当元素在视口外时，bottom 属性的行为就像其位置是固定的。

现在，让我们通过一些例子来理解这个属性。

示例

在此示例中，有四个绝对定位的 div 元素。我们正在为它们应用 bottom 属性。值为 bottom: initial; 和 bottom: auto; 的 div 元素将由于具有相似的尺寸和默认值而重叠。

此处，bottom 属性的长度以 px 和 em 定义。

输出

示例 - 使用负值

在此示例中，有四个相对定位的 div 元素。我们正在为它们应用带有负值的 bottom 属性。此处，bottom 属性的负长度值以 px 和 em 定义。

输出