CSS 将 div 定位到包含 div 的底部

在本文中，我们将介绍如何使用 CSS 将一个 div 元素定位到包含 div 元素的底部。定位元素在 web 设计中非常常见，它可以让我们在网页布局中精确地控制元素的位置。

阅读更多：CSS 教程

使用相对定位将 div 定位到底部

相对定位是 CSS 中一种常见的定位方式，它可以让我们通过调整元素的位置属性来实现定位效果。要将一个 div 定位到其包含 div 的底部，我们可以使用相对定位结合 bottom 属性来实现。

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 300px;
  height: 200px;
  border: 1px solid black;
}

.bottom-div {
  position: relative;
  bottom: 0;
  background-color: lightblue;
}
</style>
</head>
<body>

<div class="container">
  <div class="bottom-div">
    这个 div 被定位到了包含 div 的底部。
  </div>
</div>

</body>
</html>

在上面的示例中，我们创建了一个包含 div 元素的容器，它具有相对定位。bottom-div 类被指定为要定位到底部的 div 元素，它也具有相对定位。通过将 bottom 属性设置为 0，我们将这个 div 定位到了包含 div 的底部。

使用绝对定位将 div 定位到底部

另一种常见的定位方式是使用绝对定位。和相对定位不同，绝对定位是相对于最近的具有定位属性的父元素进行定位的。

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 300px;
  height: 200px;
  border: 1px solid black;
}

.bottom-div {
  position: absolute;
  bottom: 0;
  background-color: lightblue;
}
</style>
</head>
<body>

<div class="container">
  <div class="bottom-div">
    这个 div 被定位到了包含 div 的底部。
  </div>
</div>

</body>
</html>

在上面的示例中，我们使用了绝对定位来将 div 定位到了包含的 div 的底部。在 bottom-div 类中，我们将 position 属性设置为 absolute，并将 bottom 属性设置为 0。这样，这个 div 将相对于其具有定位属性的最近父元素进行定位，也就是包含 div。

使用 CSS Flexbox 将 div 定位到底部

Flexbox 是 CSS 中一种强大的布局模式，它可以让我们更轻松地进行页面布局和定位元素。要将一个 div 定位到包含 div 的底部，我们可以使用 Flexbox 的属性来实现。

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 300px;
  height: 200px;
  border: 1px solid black;
}

.bottom-div {
  background-color: lightblue;
}
</style>
</head>
<body>

<div class="container">
  <div class="bottom-div">
    这个 div 被定位到了包含 div 的底部。
  </div>
</div>

</body>
</html>

在上面的示例中，我们使用了 Flexbox 的一些属性来实现 div 的底部定位。在容器类（container）中，我们设置了 display 属性为 flex，这样容器的子元素就会以弹性布局的方式进行定位。通过设置 flex-direction 为 column，我们使得子元素垂直排列，而不是水平排列。通过设置 justify-content 为 flex-end，我们将子元素定位到容器的底部。最后，通过设置 align-items 为 center，我们将子元素居中对齐。