ボックスのポジション設定では、次の3つの設定を行います。
ボックスの位置設定(相対・絶対・固定・追従)
ボックスの重ね順設定
ボックスのはみ出し設定
これらの設定を組み合わせると、スクロールに応じて動くバナーや、特定のボックスだけを手前に表示するレイアウトを作成できます。
ポジション設定の操作箇所を開く
デザインエディタの右側にある[ボックス]タブから、対象ボックスのポジション設定を編集します。
ボックスの位置設定
ボックスを配置する際、親ボックス・周囲のボックス・スクリーン全体のいずれかを基準に、どのようなルールで位置を決めるかを指定するための設定です。
相対・固定・絶対・追従の4種類のルールで位置設定が可能です。
それぞれのルールの詳細や設定方法は、ボックスの位置設定:相対・固定・絶対・追従をご覧ください。
位置設定 | 説明 |
相対位置(Relative) | 周囲のボックスとレイアウトのフローを基準に、親ボックスのレイアウトルールに従って位置が決まります。 |
固定位置(Fixed) | スクリーン自体を基準に位置を固定します。画面スクロールをしても表示位置は変わりません。 |
絶対位置(Fixed) | 最も近い親ボックスをフレームとみなし、その枠を基準に子ボックスを任意の位置に配置します。 |
追従位置(Sticky) | 通常は相対と同じフローで配置され、スクロール中に指定位置に達したときだけスクリーンまたは親ボックスを基準に一時的に固定されます。 |
ボックスの重ね順設定
重ね順では、ボックス同士が重なったときの前後関係を指定します。
デフォルトでは、すべてのボックスの重ね順は0で、同じ階層のボックスはレイヤーパネル上で下にあるボックスほど前面に表示されます。
重ね順のポイント:
個々のボックスの重ね順の値を変更すると、数字が大きいボックスほど前面に表示されます。
同じ値の場合は、同じ階層内でレイヤーパネルの下側にあるボックスが前面に表示されます。
ボックスのはみ出し設定
親ボックスからはみ出した子ボックス(オーバーフロー)をどのように表示させるかを設定します。スクロールできるコンテンツ領域や、ボックス外に見せたくない要素のマスクなどで使用します。
詳細は、はみ出し設定をご覧ください。
z-index zindex 前面 背面 最前面 最背面 重ねる 順番 手前 隠れる

