ボックスの位置設定：相対・固定・絶対・追従

※動画内では追従についての説明がありませんが、追従位置の設定も可能です。

Studioのエディタでは、ボックスの位置設定として相対・固定・絶対・追従の4種類を利用できます。これらを組み合わせることで、スクロールに追従するヘッダーや装飾要素の重なりなど、表現の幅が広がります。

位置設定の種類

それぞれの位置設定の基準と動きを一覧で整理します。

相対位置（Relative）は、ボックス同士の位置関係とレイアウトのフローを基準に配置が決まる設定です。

スマートフォンやタブレットなどで画面幅が変わっても、方向・配置のルールに従って要素の位置や間隔が自動的に調整されます。

相対位置は、レスポンシブデザインに最も適した基本の位置設定です。

ヘッダーや本文、画像など、通常のレイアウトに使用するボックスは、原則として相対位置のまま配置すると、複数デバイスで崩れにくいレイアウトを維持できます。

固定位置は、スクリーン自体を基準にボックスを常に同じ位置に表示する設定です。

ベースボックス（Base <div>）直下に配置したボックスを[固定]に設定すると、ボックスは画面上の特定の位置に固定され、スクロールに影響されず常に同じ位置に表示されます。

ヘッダーやサイドバー、常に表示しておきたい問い合わせボタンなどに適しています。

右パネルで[ポジション]設定を開きます。
[位置]の入力フィールドをクリックし、プルダウンメニューから[固定]を選びます。
[距離]の設定フィールドで、最も近いスクリーンの四辺からの距離をpxで入力して表示位置を指定します。
画面下部などに固定したい場合は、ボックスをスクリーンの端までドラッグするか、[位置]に実数を入力して調整します。

絶対位置は、入れ子構造の親子ボックスにおいて、最も近い親ボックスを基準に子ボックスの位置を固定する設定です。

写真上のラベルや新着アイコンなど、親ボックス内で装飾的に要素を重ねたい場合に有効です。

入れ子構造の親子ボックスの子ボックスを選択します。
右パネルで[ポジション]設定を開きます。
[位置]の入力フィールドをクリックし、プルダウンメニューから[絶対]を選びます。
ボックスの表示位置を設定します。ボックスをドラッグして配置したい箇所に移動する、または、[距離]の設定フィールドで、最も近い親ボックスの四辺からの距離を数値（単位：px）で入力して指定します。

追従位置は、スクロールに応じてボックスの配置が相対から固定へ切り替わり、親ボックスのスクロールが終わると固定が解除される設定です。

料金表の見出し行やブログのサイドナビゲーションなど、スクロール途中だけ追従させたい要素に向いています。

注意：

追従位置の設定状況は、エディタ上では確認することが出来ません。編集中の動作確認はプレビューURL上で行なってください。
親要素のはみ出し設定が[表示]または[スクロール]の場合に追従位置が有効になります。[非表示]の場合は追従が無効になり、スクロール時に固定が行われません。
- [はみ出し]：Webページ全体のスクロールに対して動作します。
- [スクロール]：親要素内のスクロールに対して動作します。
- [非表示]：追従位置の設定が無効となり動作しません。

追従位置に設定したいボックスを選択します。
右パネルで[ポジション]設定を開きます。
[位置]の入力フィールドをクリックし、プルダウンメニューから[追従]を選びます。
追従指定をしたボックスが、スクロール時に固定表示に切り替わる位置を指定します。
[距離]の設定フィールドで、親ボックス四辺からの距離を数値（単位：px）で入力して指定します。
この指定することで、要素がどの位置から固定表示に切り替わるかを制御できます。

下の画像では、追従に設定したボックスが親ボックスの上辺 48pxの位置から固定表示されるように指定されています。

画面固定 追従ヘッダー 粘着