HTMLとCSSでレイアウトを整えるとき、要素を特定の位置に配置したい場面がありますよね。 そんなときに使えるのが positionプロパティ です。この記事では、positionの基本と使い分けをやさしく解説します。 positionとは？ positionは、要素の配置方法を指定するCSSプロパティです。位置を調整するには、top、left、right、bottomと組み合わせて使用します。 主なpositionの種類と特徴 種類特徴 static初期値。通常の文書の流れに従って配置 relative元の位置を基準にして移動可能 absolute親要素（positionを持つ）を基準にして配置 fixed画面の表示位置に固定（スクロールしても動かない） stickyスクロール位置によって切り替わる 基本パターン例 ① relativeで少しだけずらす コピー .box { position: relative; top: 10px; left: 20px; } ② absoluteで親要素を基準に配置 コピー <div class="parent"> <div class="child">ここに固定</div> </div> コピー .parent { position: relative; } .child { position: absolute; top: 0; right: 0; } ③ fixedでページ右下に固定ボタン コピー .fixed-button { position: fixed; bottom: 20px; right: 20px; } ④ stickyでスクロール時に固定される見出し コピー .sticky-header { position: sticky; top: 0; background: white; z-index: 100; } おわりに positionプロパティを理解すると、自由なレイアウトが可能になります。初めはrelativeとabsoluteの違いから試してみるのがおすすめです。 次回は「positionとz-indexの関係」「レスポンシブ対応での注意点」など、さらに深掘りした内容を紹介します！
タグ: position
