本文摘要：在CSS布局中，通过灵活运用bottom属性，可以实现元素基于底部定位的需求，如将全屏背景图的底部始终与屏幕底部对齐。具体操作是首先设置body为相对定位并占满屏幕高度，然后将背景图元素绝对定位，并设定其bottom值为0，使其相对于body底部定位。同时，确保元素z-index为负数以置底。这种根据底部定位的方法，结合top属性和绝对、相对定位机制，在特定场景下能有效提升布局灵活性。

CSS

CSS中通过top和bottom属性来定位元素时，一般使用顶部或者底端为参照来确定位置。然而，在某些情况下，我们可能须要依据底端并非顶部来定位元素。

例如，如果我们要创建一个满屏的背景图，同时希望背景图的底端能够与屏幕底端排列整齐，那么就须要用到依据底端定位的方法。

body {
position: relative;
height: 100vh; /* 确保body占满整个屏幕 */
}
.bg {
position: absolute;
bottom: 0; /* 此时bottom属性是相对于body元素的底端来确定位置 */
left: 0;
width: 100%;
height: auto;
z-index: -1;
}

上述代码中，我们通过将body元素设定为相对布局来给后代元素（即背景图）提供相对布局的参照。接着，我们将背景图的底端位置设定为相对于body元素的底端，这样就能够实现依据底端来定位元素。

须要注意的是，我们须要将背景图的z-index设定为负数，以确保它在文档流中处于最底层。

总之，依据底端并非顶部定位元素可以在某些情况下提供更好的灵活性。在使用时，须要注意设定好参照元素，以及使用相应的CSS属性来实现定位。

名词解释

作为当前文章的名词解释，仅对当前文章有效。

相对定位（relative positioning）：在CSS布局中，相对定位是一种定位方式，它允许元素相对于其正常文档流位置进行偏移。当我们将一个元素的position属性设置为relative时，该元素仍然保持在文档流中的原始位置上，但可以通过top、right、bottom和left属性来指定相对于其自身原位置的偏移量。在文章上下文中，body元素被设为相对定位，为其中的背景图元素提供了一个基于此位置进行绝对定位的参考基准。

绝对定位（absolute positioning）：绝对定位是CSS布局中另一种定位模式，它允许元素脱离正常文档流，根据最近的已定位祖先元素（相对定位、绝对定位或固定定位的元素）来确定自己的位置。如果没有这样的祖先元素，则以浏览器窗口作为参照物。在本文案例中，背景图元素通过设置position属性为absolute，并使用bottom: 0;实现其底部始终与body元素的底部对齐，这就是绝对定位的应用场景。

vh单位（viewport height unit）：vh是CSS长度单位之一，表示视口高度的百分比。1vh等于当前视口高度的1%。在文章中，为了确保body元素的高度能占据整个屏幕可视区域的高度，将height属性设置为100vh，这意味着无论设备屏幕大小如何变化，body元素都能始终保持与视口高度相同，从而为根据底部定位背景图提供了适应各种屏幕尺寸的基础环境。