【CSS Modules】position型の使い方
position型の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
positionプロパティは、HTML要素のWebページ上での配置方法を制御する値を保持するプロパティです。これは、要素のレイアウトを決定し、Webデザインの自由度を高めるための基本的なCSSプロパティです。
このプロパティには主に五つの値があります。staticはデフォルト値で、要素は文書の通常の流れに沿って配置され、位置調整はできません。relativeは、通常の流れに沿って要素を配置しつつ、自身の元の位置から相対的に移動させます。absoluteは、要素を文書の流れから取り除き、最も近いstatic以外の祖先要素、または初期包含ブロックを基準として配置されます。fixedは、要素をビューポート（ブラウザの表示領域）に固定し、スクロールしてもその位置は変わりません。stickyは、スクロール量に応じてrelativeとfixedの振る舞いを切り替え、特定の条件下で要素を画面に固定します。
これらの値は、top、right、bottom、leftプロパティと組み合わせて要素の具体的な位置を定義します。また、複数の要素が重なる場合の表示順序は、z-indexプロパティで制御されます。positionプロパティを理解することは、Webページのレイアウトを柔軟かつ正確に構築するために不可欠な基礎知識です。
公式リファレンス: <position>
構文(syntax)
1div { 2 position: static; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません