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

positionプロパティは、HTML要素のWebページ上の配置方法を制御するプロパティです。このプロパティを使用することで、要素を通常の文書の流れから独立させたり、特定の場所に固定したりするなど、柔軟なレイアウトを実現します。

主な値は以下の通りです。

staticは、デフォルト値であり、要素は通常のHTMLの順序（文書フロー）に従って配置されます。top, right, bottom, leftプロパティは適用されません。

relativeは、要素を通常の文書フローの中に配置しつつ、本来あるべき位置から相対的に移動させることができます。top, right, bottom, leftプロパティが有効になり、要素が本来占める空間は残ります。

absoluteは、要素を通常の文書フローから完全に切り離し、最も近いpositionプロパティがstatic以外に設定された親要素を基準として配置します。親要素にstatic以外の指定がなければ、ブラウザの表示領域（ビューポート）を基準とします。要素が占めていた空間はなくなります。

fixedは、要素をビューポート（ブラウザの表示領域）を基準として配置し、スクロールしてもその位置が常に固定されます。ヘッダーやフッターなど、常に画面の特定の場所に表示したい要素に利用されます。

stickyは、要素が通常の文書フロー内に配置されますが、スクロールによって指定した位置に到達すると、まるでfixedのように振る舞い、その位置に固定されます。ナビゲーションメニューなど、スクロールに合わせて画面の特定位置に固定したい場合に活用されます。

これらのpositionプロパティは、top, right, bottom, leftなどのプロパティと組み合わせて使用することで、Webページの複雑なレイアウトを細かく制御できます。Webデザインと開発において基礎的かつ重要なプロパティです。

Copy
1position: static | relative | absolute | fixed | sticky | initial | inherit | unset;

引数なし

引数はありません

戻り値なし

戻り値はありません