position配置方法
通常フローに沿って並ぶか、基準となる箱から位置を指定するかを5つの値で選びます。
position
要素をどの基準で配置するかを決めるプロパティ。通常の並びを保つか、親要素や画面を基準に置くかを切り替えます。
遊んでみよう
比較用：top 18px / left 22px
CSS
.element position: static;
値のパターン
positionの構成要素
top / right / bottom / left基準からの距離
static以外では、topなどのインセットプロパティを組み合わせて最終的な位置を決めます。
containing block位置の基準
absoluteは直近の配置された祖先、fixedは通常画面、stickyはスクロールする祖先を基準にします。
早見表
初期値はstaticです。通常フローに残る値と外れる値、位置の基準がどこになるかを比べます。
01
static通常の流れに並ぶ初期値02
relative元の位置からずらす元の空間を保つ03
absolute祖先を基準に置く通常フローから外れる04
fixed画面を基準に固定スクロールしても留まる05
stickyしきい値で固定スクロール領域内よくある使い方
01
カードの角へバッジを置く
親をrelativeにして基準を作り、子をabsoluteにすると、カードの角へ重ねて配置できます。
.card { position: relative; } .badge { position: absolute; top: 8px; right: 8px; }02
画面へ操作ボタンを固定する
ページをスクロールしても同じ場所に残したい操作は、fixedとインセットで画面端へ配置します。
position: fixed; right: 24px; bottom: 24px;03
見出しをスクロール中に留める
スクロール領域の上端へ到達したら留めたい見出しには、stickyとtopを組み合わせます。
position: sticky; top: 0;ポイント
positionだけでは、位置が変わらない値もある。
relative・absolute・fixed・stickyは、topやleftなどを組み合わせて位置を決めます。absoluteの基準にしたい親にはposition: relativeを指定します。absoluteやfixedで通常フローから外した要素は、文字を拡大したときや画面が狭いときにほかの内容へ重ならないかも確認します。positionはすべての要素に適用でき、通常は子要素へ継承されません。
関連するCSSも見てみよう。
position と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。