positionとは何か
positionは、要素をどの基準にもとづいて配置するかを決めるCSSのプロパティです。値を変えると、通常の流れに沿って並ぶか、特定の基準からずらして置くか、画面に固定するかといった挙動が切り替わります。
あわせて使う上下左右の位置指定と組み合わせることで、要素を基準位置からどれだけずらすかを細かく決められます。positionが基準を、位置指定がずれ幅を担当します。
重なり順を制御するz-indexも、多くの場合positionが指定されていることが前提です。配置と重なりはセットで考えると理解しやすくなります。
staticとrelativeの違い
staticは初期値で、要素は通常の流れに沿って順番に並びます。この状態では上下左右の位置指定は効きません。何も指定しない普通の配置がstaticだと考えてよいでしょう。
relativeは、要素本来の位置を基準に、そこからずらして配置します。元の場所は確保されたまま見た目だけが移動するため、周囲のレイアウトは崩れにくいのが特徴です。
relativeはそれ自体で大きく動かすより、後述するabsoluteの基準となる親を作る目的でも使われます。控えめなずらしと基準づくりの二役を覚えておくと便利です。
実務ではどこで関係する？
positionは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。
CSSのpositionとは？static・relative・absolute・fixedについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。
- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める
absoluteとfixedの違い
absoluteは、通常の流れから外れ、位置指定の付いた最も近い親要素を基準に配置されます。基準となる親がなければページ全体が基準になります。重ねて配置するパーツに向きます。
fixedは画面そのものを基準に固定され、スクロールしても位置が変わりません。常に表示しておきたいヘッダーや、画面端のボタンなどに使われます。
どちらも通常の流れから外れるため、元あった場所のスペースは確保されません。周囲の要素が詰まって見えることがあるので、余白の調整が必要になる場合があります。
固定ヘッダーを作る手順
スクロールしても上部に残るヘッダーは、positionを使う代表的な例です。次の手順で基本形を作れます。
- ヘッダー要素にfixedを指定して画面を基準に固定する
- 上端からの位置を指定して画面の最上部に貼り付ける
- 横幅を画面いっぱいに広げて隙間が出ないようにする
- ヘッダーが他の要素の上に来るようz-indexを十分大きくする
- 本文がヘッダーに隠れないよう、本文側に上方向の余白を足す
値を選ぶときの考え方
まず通常の流れに沿わせたいならstatic、本来の位置から少しずらすならrelative、自由に重ねたいならabsolute、画面に固定したいならfixedと、目的から選ぶと迷いません。
absoluteを使うときは、基準にしたい親にrelativeを与えておくのが定石です。基準を意識せずに使うと、意図しない場所に飛んでしまう原因になります。
配置の確認を素早く共有する
固定ヘッダーや重ねたパーツは、実際にスクロールして初めて挙動を確認できることが多いものです。試作をチームに見てもらいたいとき、ギガサイト便ならHTMLやZIPをドロップするだけで共有URLを発行でき、その場で動きを確認してもらえます。
同じURLのまま中身を差し替えられるので、配置を微調整するたびにリンクを送り直す必要がありません。確認のやり取りを軽くしたいときに便利です。
よくある質問
relativeとabsoluteの違いは何ですか？
relativeは要素本来の位置を基準にずらし、元の場所は確保されます。absoluteは通常の流れから外れ、位置指定の付いた最も近い親を基準に配置されます。元の場所のスペースは確保されない点が大きな違いです。
fixedとabsoluteはどう使い分けますか？
fixedは画面そのものを基準に固定され、スクロールしても位置が変わりません。absoluteは親要素やページを基準に配置されます。常に画面に残したいならfixed、特定の場所に重ねたいならabsoluteが向きます。
上下左右の位置指定が効かないのはなぜですか？
positionが初期値のstaticのままだと、上下左右の位置指定は効きません。relativeやabsolute、fixedなど、static以外の値を指定してから位置を調整してください。
absoluteで要素が意図しない場所に飛ぶのはなぜですか？
基準にしたい親に位置指定がないと、より外側の要素やページ全体が基準になってしまうためです。重ねたい親要素にrelativeを与えて基準を明示すると、意図した位置に配置できます。
実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？
細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。