レッスン内容
ポジションプロパティは、要素のページ内の位置を決定します。要素の位置を設定すると、上部、下部、左側、および右側のプロパティを調整できます。
静的ポジショニング
デフォルトでは、すべての要素は静的な位置を持っているため、要素はドキュメントフローに固定されます。静的ポジショニングの要素は、積み重ねられた順序通りに表示されます。スタイリングが追加されていない場合、これらの要素は重ならず、異なる要素間で異なるデフォルト値を持ちません。要素を静的に設定する唯一の理由は、それに適用されたポジショニングを取り除くためです。
相対ポジショニング
相対ポジショニングが設定された要素は、通常の位置に対して相対的に配置されます。他のポジショニング属性（top、left、bottom、またはright）が追加されていない相対設定は影響を受けません。これは、静的な状態のままの場合と同様に、要素自体に対して相対的です。相対要素の上部、右側、下部、左側のプロパティを設定すると、要素は通常の位置から離れて移動します。他のコンテンツは、要素が残した空白に収まるように調整されません。
相対ポジショニングを持つ要素は、他の要素と重なることができ、その位置や通常のドキュメントフローに影響を与えることなく重なります。
要素に相対ポジショニングを使用すると、2つのことが起こります：
- その要素でz-indexの使用が導入されます。これは静的な要素では機能しません。z-indexの値を設定しなくても、この要素は重なる他の静的要素の上に表示されます。z-indexは、静的に設定されていない任意の要素で使用できます。
- それは絶対ポジショニングされた子要素を制限します。相対的な要素の子要素、または静的以外の位置にある要素は、その要素内で絶対ポジショニングされることができます。
こちらでz-indexの値を適用する方法について詳しく学ぶ。
絶対ポジショニング
通常のドキュメントフローから要素を取り除くには、絶対ポジションが優れた選択肢です。絶対要素の位置は他の要素に影響を受けず、他の要素の位置に影響を与えません。
デフォルトでは、要素の位置はbody要素に対して相対的に配置されますが、親要素が静的以外の設定にされている場合、任意の絶対要素を他の要素内に配置することができます。
位置を設定するためには、top、left、bottom、およびrightのポジショニング属性を使用します。これらの値は、静的以外の設定を持つ次の親要素に対して相対的になります。
固定ポジショニング
固定された要素は、ビューポートまたはブラウザウィンドウに対して相対的に配置されます。
ページをスクロールする際、固定要素はその位置に固定されたままです。この位置設定は、通常、固定されたナビゲーションに使用されます。
スティッキーポジショニング
スティッキー要素は、ビューアのスクロール位置に基づいて相対位置と固定位置を交互に切り替えます。
スティッキー要素は、指定されたスクロール位置に達するまではドキュメントフローに対して相対的に配置されます。その位置に達すると、それ以降は直接の親要素内の固定要素の動作に切り替わります。スティッキー要素が親要素の下部に達すると、スクロールが停止します。
スティッキー位置を正しく動作させるために、少なくとも上部、下部、左側、または右側の位置値を指定する必要があります。スティッキーポジションは、親要素のいずれかが高さを設定しているか、overflowがhidden、scroll、またはautoに設定されている場合に正しく動作しない可能性があります。
一部のブラウザはスティッキーポジショニングをサポートしていないことがあります。どのブラウザがposition: stickyをサポートしているか確認してみてください。
ポジションコントロールと値
相対、絶対、固定、およびスティッキーポジションプロパティでは、スタイルパネル内に次のコントロールがあります：
- ポジショニングコントロール
- 相対性インジケーター
- Z-index値フィールド
ポジショニングコントロール
絶対位置と固定位置の要素には、要素を相対的に配置するためのプリセットが表示されます。これは、相対性インジケーターで示された要素に対して位置を設定するものです。
次のいずれかのプリセット位置を選択できます：
- 上左: 以下の値を設定します: top: 0px - left: 0px
- 上右: 以下の値を設定します: top: 0px - right: 0px
- 下左: 以下の値を設定します: bottom: 0px - left: 0px
- 下右: 以下の値を設定します: bottom: 0px - right: 0px
- 左: 以下の値を設定します: top: 0px - left: 0px - bottom: 0px
- 右: 以下の値を設定します: top: 0px - right: 0px - bottom: 0px
- 上: 以下の値を設定します: top: 0px - left: 0px - right: 0px
- 下: 以下の値を設定します: bottom: 0px - left: 0px - right: 0px
- フル: 以下の値を設定します: top: 0px - bottom: 0px - left: 0px - right: 0px（相対親要素またはbody全体を覆います）
手動コントロールでは、プリセットをオーバーライドするか、上部、下部、左側、右側の自動値をデフォルトに設定できます。各側面の値を変更するには、コントロールをドラッグするか、それをクリックしてプリセット値を選択するか、カスタム値を入力します。
- 上: 上から要素を押し下げるために増やします
- 左: 左から要素を押し出し、右に移動するために増やします
- 右: 右から要素を押し出し、左に移動するために増やします
- 下: 下から要素を押し上げるために増やします
これらのいずれかに負の値を追加すると、逆方向に移動し、親要素の境界外に押し出される可能性があります。
相対性インジケーター
相対性インジケーターは、選択した要素がどの要素に対して相対的に配置されているかを示します。
relative位置指定された要素は、それに対して相対的に配置されます。
absolute位置指定された要素は、親要素に対して相対的に配置されます。デフォルトでは、これはbody要素かもしれません。特定の親要素内で要素を絶対位置に配置する場合は、その祖先の位置を静的以外に変更してください。
fixed要素は、ページ全体に対して相対的に配置され、ページがスクロールされてもその位置を保持します。
sticky要素は、直接の親要素に対して相対的に配置されます。一部の場合では、これはページ全体になるでしょう。
Z-index
Z-indexは、仮想のz軸上での要素の位置を示します。この軸はコンピュータ画面内外に伸びています。デフォルトでは、要素にはautoのz-indexがあり、ページの下部にある要素は上に積み重ねられ、右側の要素は左側の要素の上に積み重ねられます。静的要素は常に、相対、絶対、固定、またはスティッキー位置に設定された要素よりも低い位置に積み重ねられます。
位置指定された要素は、自然なドキュメントフロー内で他の要素と重なる可能性があるため、位置指定された要素のZ-index値を変更して、デフォルトのスタッキング順序を変更できます。高い値は低い値の上にスタックされます。Z-index値は0から2147483647までの任意の整数にすることができます。また、負の値も使用できますが、要素の可視性が失われる可能性があります。負の値を使用すると、要素はほとんどの要素の下にレンダリングされることになります。
ネストされた要素でのZ-index
z-indexがautoに設定されている場合、要素のスタック順序はその親のスタック順序と同じになります。これらの要素は、親要素に対してスタックされる可能性がありますが、他の要素に対しては親要素のz軸内に留まります。例えば、要素Aのz-indexが要素Bよりも高い場合、要素Bの子要素のz-index値がどれだけ高くても、要素Aよりも高くなることはありません。
フロート設定(Float)
テキストを要素の周りに折り返すために、要素を左または右にフロートさせます。要素をフロートさせるには、スタイルパネルでfloat leftまたはfloat rightプロパティを有効にします。
要素を左または右にフロートさせるか、フロートしない（none）に設定することができます。noneは要素をページの流れの中で自然な位置に保持します
複数の要素をフロートさせると、それらが横に並べてスタックされます。このレイアウト技術は、コレクションリストやナビゲーションリンクなど、多くのネイティブのWebflow要素で使用されています。また、これらのレイアウトタスクはフレックスボックスを使用しても実現できます。
Float none
noneはほとんどの要素のデフォルト設定であり、要素を通常のドキュメントフローに配置します。要素に継承されたフロート設定がある場合、たとえばより大きなブレークポイントから継承されたものである場合、フロートをnoneに設定することで、要素をページ上で自然な位置に戻すことができます。
Float left
要素を左にフロートさせると、親要素内で左に配置されます。この設定は、他の要素を右側または下側に直接隣接させるか、または要素にクリア設定が適用されていない限り、その要素の右側にスタックします。
Float right
要素を右にフロートさせると、親要素内で右に配置されます。フロートされた要素の直下にある長い段落やリッチテキストは、クリアプロパティが設定されていない限り、その要素の周りに折り返されます。
Clear設定
要素にclearを設定すると、それがフロート要素の周りに折り返されないようにします。この設定は、フロート要素の下にスタックされた任意の要素に適用できますが、フロート要素自体には適用できません。
clearプロパティが設定された要素は、フロート要素が望むように隣接して上に移動することはありませんが、自体をフロート要素の下に移動させます。
Clear none
clear noneは、ほとんどの要素のデフォルト設定です。clear noneに設定された要素は、ドキュメントフローの直上にあるフロート要素の隣にスタックされるか、それに沿って折り返されます。
要素に継承されたclear設定がある場合、たとえばより大きなブレークポイントから継承された場合、clearをnoneに設定することで、クリア設定をクリアすることができます。
Clear left
clear leftは、左にフロートする要素の周りに要素が折り返されるのを防ぎます。
Clear right
clear rightは、右にフロートする要素の周りに要素が折り返されるのを防ぎます。
Clear both
clear bothは、左または右にフロートしているかに関係なく、任意のフロート要素の周りに要素が折り返されるのを防ぎます。