メインコンテンツにスキップ

ボックスのポジション(位置・重ね順・はみ出し)設定

ボックスのポジション設定では、相対・固定・絶対・追従などの位置設定に加え、重ね順やはみ出しの表示方法を調整します。デザインエディタ右側の[ボックス]タブから操作します。

今日アップデートされました

ボックスのポジション設定では、次の3つの設定を行います。

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

  • ボックスの重ね順設定

  • ボックスのはみ出し設定

これらの設定を組み合わせると、スクロールに応じて動くバナーや、特定のボックスだけを手前に表示するレイアウトを作成できます。

ポジション設定の操作箇所を開く

デザインエディタの右側にある[ボックス]タブから、対象ボックスのポジション設定を編集します。

  1. ポジション設定を行いたいボックスを選択します。

  2. 右パネルで[ボックス]タブを開きます。

    パネルが閉じている場合は、右パネルを開いてください。

  3. タブ内をスクロールし、下部にある[ポジション]を表示します。

  4. 必要に応じてポジション設定を変更します。

    公開中のサイトの編集を行った場合には、公開パネルでサイトを更新します。

    この操作を行うまで、編集内容は公開サイトには反映されません。

ボックスの位置設定

ボックスを配置する際、親ボックス・周囲のボックス・スクリーン全体のいずれかを基準に、どのようなルールで位置を決めるかを指定するための設定です。

相対・固定・絶対・追従の4種類のルールで位置設定が可能です。

それぞれのルールの詳細や設定方法は、ボックスの位置設定:相対・固定・絶対・追従をご覧ください。

位置設定

説明

相対位置(Relative)

周囲のボックスとレイアウトのフローを基準に、親ボックスのレイアウトルールに従って位置が決まります。

固定位置(Fixed)

スクリーン自体を基準に位置を固定します。画面スクロールをしても表示位置は変わりません。

絶対位置(Fixed)

最も近い親ボックスをフレームとみなし、その枠を基準に子ボックスを任意の位置に配置します。

追従位置(Sticky)

通常は相対と同じフローで配置され、スクロール中に指定位置に達したときだけスクリーンまたは親ボックスを基準に一時的に固定されます。

ボックスの重ね順設定

重ね順では、ボックス同士が重なったときの前後関係を指定します。

デフォルトでは、すべてのボックスの重ね順は0で、同じ階層のボックスはレイヤーパネル上で下にあるボックスほど前面に表示されます。

重ね順のポイント:

  • 個々のボックスの重ね順の値を変更すると、数字が大きいボックスほど前面に表示されます。

  • 同じ値の場合は、同じ階層内でレイヤーパネルの下側にあるボックスが前面に表示されます。

ボックスのはみ出し設定

親ボックスからはみ出した子ボックス(オーバーフロー)をどのように表示させるかを設定します。スクロールできるコンテンツ領域や、ボックス外に見せたくない要素のマスクなどで使用します。

詳細は、はみ出し設定をご覧ください。


z-index zindex 前面 背面 最前面 最背面 重ねる 順番 手前 隠れる

こちらの回答で解決しましたか?