CSS position：5つの値を1つのライブデモで
CSS positionガイド
CSS position：static、relative、absolute、fixed、stickyのデモ | We.Inc
スクロールするデモの中で、1つの要素をstatic、relative、absolute、fixed、stickyに切り替えられます。包含ブロック、inset、stickyが効かないときの対処法、中央寄せも解説します。
positionプロパティは、要素をどのように配置するかを決めます。staticは通常の流れです。relativeは元の場所を確保したまま少しずらします。absoluteは要素を流れから外し、最も近い位置指定された祖先を基準に配置します。fixedはビューポートに固定します。stickyは、top: 0のようなしきい値に達するまで普通にスクロールし、そこで留まります。
5つの値
- 流れの中に残り、元の場所も確保される
- 自分本来の位置
- 流れから外れる
- 最も近い位置指定された祖先のパディングボックス
- 流れから外れる
- ビューポート。ただし祖先に変形やフィルターなどの指定がある場合を除く
- 流れの中に残る
- 最も近いスクロールする祖先（親の範囲内）
下のデモでは、スクロールできる領域の中にオレンジ色のボックスが1つあります。position の値を切り替え、オフセットを動かし、スクロールして、何を基準に配置されているかを観察してください。続いて、包含ブロックの解説、stickyが効かないときのチェックリスト、insetショートハンドを紹介します。
- オレンジ色のボックスのposition の値を選びます。
- 上と左のオフセットを設定し、位置指定された親をオンにしたりオフにしたりして、絶対配置の要素がどのボックスを基準にするかを確認します。
- デモの中をスクロールして、固定配置と粘着配置を比べます。
- 見ている状態に合うCSSをコピーします。
- カードにposition: relativeを付けると、絶対配置の子要素はそのカードを枠として使います。このパターン1つで、バッジやオーバーレイのレイアウトのほとんどをまかなえます。
- 上下左右4方向のオフセットを個別に書くより、inset: 0を使いましょう。
- transform、filter、perspective、contain: paintのいずれかを持つ要素の中にある固定配置の要素は、もう画面には固定されません。bodyの末尾に移すか、ポータルで描画しましょう。
- 位置指定された要素は、デフォルトで通常配置の要素より上に描画されます。z-indexを使うのは、位置指定された要素同士が重なるときだけにしましょう。
よくある質問
absolute（絶対配置）とrelative（相対配置）の違いは何ですか？
相対配置は要素を見た目の上でずらしますが、レイアウト上の元の場所は残るので、周りは何も動きません。絶対配置は要素をレイアウトから完全に取り除き、隣の要素がその隙間を詰めます。オフセットは、本来あったはずの場所ではなく、最も近い位置指定された祖先を基準に測られます。
position: stickyが効かないのはなぜですか？
よくある原因は、上端のしきい値がない、祖先にスクロールを隠すか自動にするoverflow指定がある、親の高さがsticky要素と変わらない、のいずれかです。このページのチェックリストを順に確認してください。最初の2項目でほとんどのケースが見つかります。
絶対配置の要素は何を基準に配置されますか？
包含ブロックです。つまり、positionがstatic以外である最も近い祖先のパディングボックスです。transform、filter、特定のcontainの値を持つ祖先も該当します。どれもなければ、ビューポートと同じ大きさの初期包含ブロックが基準になります。
固定ヘッダーがページと一緒に動いてしまうのはなぜですか？
祖先にtransform、perspective、filter、backdrop-filter、will-change: transform、contain: paintのいずれかがあります。これらはどれも、その祖先を固定配置の子孫の包含ブロックにしてしまうため、ヘッダーは画面ではなくその祖先に固定されます。
CSSのinsetとは何ですか？
上下左右4方向のオフセットをまとめたショートハンドで、marginと同じく1〜4個の値のパターンに従います。inset: 0は、位置指定された要素を包含ブロック全体に広げます。inset-inlineとinset-blockは、それぞれの軸の組を設定します。
包含ブロックをわかりやすく
- どのオフセットにも、基準となる長方形が必要です。通常配置と相対配置の要素では、親のコンテンツボックスが基準です。絶対配置では最も近い位置指定された祖先のパディングボックスが基準なので、カードのパディングが絶対配置の子を内側へ押し込むことはありません。
- 固定配置では通常、ビューポートが基準です。ただし祖先にtransform、perspective、filter、backdrop-filter、contain: paint、またはそれに当たるwill-changeの値が付くと話が変わり、その祖先が基準になって要素も一緒にスクロールします。このページのデモはまさにこれを利用して、固定配置のボックスをデモの枠内に留めています。
絶対配置で中央に寄せる
- サイズが分かっている場合は、inset: 0とmargin: autoでボックスをぴったり中央に置け、ピクセルの輪郭もくっきり保てます。サイズが分からない場合は、top: 50%とleft: 50%の後にtranslate(-50%, -50%)を指定すれば、どんな内容でも中央に寄せられます。
- どちらもボックスを流れから外すので、親はそれに合わせて大きくなりません。親の大きさを内容に合わせる必要があるなら、代わりにグリッドやフレックスボックスで中央寄せしましょう。
各値の詳細
positionの値
- 流れの中に残る
- 無視される
- デフォルト。すべてはここから始まります。
- 流れの中に残り、元の場所も確保される
- 本来の位置から少しずらす
- ちょっとした位置調整と、絶対配置の子の基準。
- 流れから外れる
- 包含ブロックの中に配置する
- バッジ、オーバーレイ、ドロップダウンメニュー、ツールチップ。
- 流れから外れる
- 画面上に配置する
- Cookieバー、フローティングボタン、全画面モーダル。
- 流れの中に残る
- 貼り付き始めるしきい値
- 表のヘッダー、セクションの見出し、サイドメニュー。
絶対配置と固定配置の包含ブロックを作るもの
位置指定された子孫を捕まえる祖先（MDNによる）
- 祖先が持っているもの
- 絶対配置の子が基準にするか
- 固定配置の子が基準にするか
- position: relative、absolute、fixed、stickyのいずれか
- する
- しない
- none以外のtransform、perspective、rotate、scale、translate
- する
- する
- none以外のfilterまたはbackdrop-filter
- する
- する
- containの値がlayout、paint、strict、contentのいずれか
- する
- する
- 上記のプロパティ（変形やフィルターなど）を指定したwill-change
- する
- する
- content-visibility: auto
- する
- する
よく使うパターン
カードの角に付けるバッジ
カードが位置指定された祖先です。負のオフセットで、バッジを角から半分はみ出させます。
表の固定ヘッダー
ラッパーがスクロールするので、top: 0のthはラッパーに貼り付きます。背景色を付けて、行が透けて見えないようにしています。
insetショートハンド
marginと同じパターンです。値が1つなら全辺、2つなら上下と左右、4つなら上から時計回りです。
- しきい値（上下左右いずれかのオフセット）を設定しているか。ないと、粘着配置は相対配置と同じ動きになります。
- 要素とスクローラーの間にある祖先に、overflow: hidden、auto、scrollのいずれかが付いていないか。付いていると、それがスクローラーになり、しかも実際にはスクロールしないことがよくあります。overflow: clipならスクロールコンテナを作りません。
- 親がsticky要素より高いか。sticky要素は親が画面上にある間だけ貼り付き、その後は親と一緒に去っていきます。
- フレックスやグリッドの行の中で、アイテムが全高に引き伸ばされていないか。align-self: startを追加して、動く余地を作りましょう。
- sticky要素が、その下をスクロールするコンテンツより上に表示されているか。コンテンツが透けて見えるなら、背景とz-indexを付けましょう。
- スクロールが、想定している祖先で本当に起きているか。DevToolsで、どの要素にスクロールバーがあるかを確認しましょう。
position プレイグラウンド
position の値
親にposition: relativeを付ける
オフセットは無視されます。ボックスは段落の間で通常の流れに沿って配置されます。
ボックスはずれて描画されますが、本来あった場所の隙間は残ります。隣の要素は動きません。
position: relativeを持つ、破線の親を基準に測られます。
位置指定された親がないため、一つ上の位置指定された祖先である、スクロールするデモ領域を基準に測られます。
スクロールしてもデモの枠に固定されます。枠にtransformがあるため、ブラウザーのウィンドウではなく枠が包含ブロックになっています。
スクローラーの上端から指定したピクセル数の位置に達するまで文章と一緒にスクロールし、その後は親が去るまで留まります。
スクロールできるデモ領域
この枠の中をスクロールしてください。スクロールして通り過ぎる対象として、ダミーの文章を入れています。
親
ボックスの前にある最初の段落です。
ボックスの後の段落です。ボックスが流れから外れたときに、この段落が上に詰まるかを見てください。
スクロール用の追加コンテンツ {n} 行目です。
親の後のコンテンツ、{n} 行目です。
CSSをコピー
固定配置が枠内に留まる理由：枠にtransform: translateZ(0)が付いているからです。どんなtransformでも、その要素は固定配置の子孫の包含ブロックになります。そのような祖先がない実際のページでは、固定配置の要素はブラウザーのウィンドウに固定されます。
stickyが効かないときのチェックリスト
固定ヘッダーがほかのコンテンツの後ろに隠れてしまう場合はこちら：
z-indexとスタッキングコンテキスト
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る