【CSS Modules】bottomプロパティの使い方

bottomプロパティは、要素の下端の位置を制御するためのプロパティです。このプロパティは、positionプロパティがabsolute、relative、fixed、stickyのいずれかに設定された要素に対してのみ効果を発揮します。具体的には、要素がその親要素やウェブページの表示領域（ビューポート）の下端から、どれくらいの距離に配置されるかを指定します。

値としては、ピクセル（px）やパーセント（%）、emなどの長さを示す単位を用いた数値、またはautoを指定できます。autoを指定した場合、ブラウザが要素の適切な位置を自動的に計算し、そのデフォルトの位置に配置されます。正の値を指定すると、要素の下端は指定した距離だけ上方向に配置され、負の値を指定すると、指定した距離だけ下方向に配置されます。

このプロパティを用いることで、ウェブページ上で特定の要素を画面の最下部に固定したり、他の要素との相対的な位置関係を調整して配置したりするなど、細かく柔軟なレイアウトを実現できます。例えば、フッターを常に画面の下部に表示させたい場合や、特定のコンテンツを下揃えに配置したい場合に活用されます。

Copy
1selector {
2  bottom: 20px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません