CSSを使用してコンテナの下部に要素を配置する方法

CSSを使用してコンテナの下部に要素を配置する方法を学びます。

HTMLには親子関係があります。 CSSを使用してコンテナの下部に要素を配置するには、次のプロパティと値を使用する必要があります。

• position: relative; （親）
• position: absolute; （子供）
• bottom: 0; （子供）

例：

<div class="parent">
  <div class="child">
  </div>
</div>

.parent {
  position: relative;
}

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

視覚化を容易にするために、CSSクラスを上から取得し、幅、高さ、色を追加しました。

.parent {
  position: relative;
  background-color: black;
  height: 200px;
  width: 200px;
}

.child {
  position: absolute;
  bottom: 0;
  background-color: darkred;
  height: 50px;
  width: 50px;
}

結果：

上記の例でわかるように、子要素はコンテナの左側に自動的に固定されます。

子要素を右下に配置する場合は、rightを使用して子要素に直接指定する必要があります。 プロパティ：

.child {
  position: absolute;
  bottom: 0;
  right: 0;
}

結果：