CSSでコンテナの下部に要素を配置する方法をわかりやすく解説

CSSで要素をコンテナの下部に配置する基本

CSSを使えば、子要素を親コンテナの下部に簡単に固定配置できます。この記事では、positionプロパティを活用した基本的な方法を、コード例とともに解説します。

HTMLは親子関係で構成されています。子要素をコンテナの下部に配置するには、以下のプロパティと値を組み合わせて使用します。

• position: relative;（親要素に指定）
• position: absolute;（子要素に指定）
• bottom: 0;（子要素に指定）

まず、HTMLの構造は次のようになります。

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

対応するCSSは以下の通りです。

.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;
}

このコードを実行すると、200px四方の黒い親コンテナの下部に、50px四方の暗赤色の子要素が配置されます。

子要素は左下に配置される

上の例からわかるように、bottom: 0;だけを指定した場合、子要素は自動的にコンテナの左下に固定されます。これは、leftやrightを指定しない場合、初期位置が左端になるためです。

右下に配置する方法

子要素をコンテナの右下に配置したい場合は、子要素に対してrightプロパティを直接指定します。

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

このコードを実行すると、子要素はコンテナの右下に配置されます。同様に、leftプロパティを指定すれば左下への配置を明示的に制御することもできます。

まとめ

要素をコンテナの下部に配置するポイントは以下の3点です。

• 親要素にposition: relative;を指定して配置の基準を作る
• 子要素にposition: absolute;を指定して絶対配置にする
• bottom: 0;で下部に固定し、必要に応じてleftやrightで左右位置を調整する

この手法は、フッターバー、バッジ、閉じるボタンなど、コンテナ内の特定の位置に要素を固定したい場面で幅広く活用できます。