このレッスンでは
- 静的な位置決め
- 相対的な位置決め
- 絶対的な位置決め
- 固定位置決め
- スティッキー・ポジショニング
- 位置制御と値
- フロート設定
- クリア設定
positionプロパティは、ページ上の要素の位置を決定します。一度設定した位置は、top、bottom、left、rightの各プロパティで調整することができます。
1.静的な位置決め
すべての要素はデフォルトで静的な位置を持ち、その要素はドキュメントの流れに沿った形で表示されます。静的配置を持つ要素は、積み重ねられた順番に表示されます。スタイルを追加しなければ、重なり合うことはなく、異なる要素が異なるデフォルト値を持つことはありません。要素を静的にする唯一の理由は、その要素に適用されている位置決めを取り除くためです。
2.相対的な位置決め
relativeに設定された要素は、通常の位置から相対的に配置されます。他の位置指定属性（top、left、bottom、right）を追加しないrelative設定は、その影響を受けません。これは、staticのままにしておいた場合と全く同じように、自分自身に対して相対的になるためです。相対的な要素にtop、right、bottom、leftのプロパティを設定すると、通常の位置から遠ざかります。他のコンテンツは、この要素によって残された隙間に収まるように調整されることはありません。
相対位置を持つ要素は、他の要素の位置に影響を与えたり、通常のドキュメントフローを中断することなく、他の要素と重なり合うことができます。
要素に相対位置を使用すると、他に2つのことが起こります。
その要素にz-indexを使用するようになります。これは静的な要素では機能しません。z-indexの値を設定しなくても、この要素は他の静的要素の上に重なるように表示されます。Z-indexはstaticに設定されていないすべての要素で利用可能です。
これは、絶対位置指定された子要素を制限します。相対要素の子要素、またはstatic以外の位置にある要素は、その要素内で絶対位置決めすることができます。
3.絶対位置の指定
ある要素を通常の文書フローから外すには、絶対位置指定が有効です。絶対的な要素の位置は、他の要素の影響を受けず、他の要素の位置にも影響を与えません。
デフォルトでは、要素の位置はbody要素からの相対位置ですが、その親がstatic以外に設定されている場合、要素の内部に任意の絶対的要素を配置することができます。
位置を設定するには、位置決め属性 top, left, bottom, right を使用します。これらの値は、static 以外の設定のある次の親要素からの相対的な位置になります。
4.固定配置
固定要素は、ビューポートまたはブラウザウィンドウに対して相対的な位置に配置されます。
ページをスクロールしても、固定要素はその位置に固定されたままです。この位置設定は、固定ナビによく使われる。
5.スティッキー・ポジショニング
付箋は、閲覧者のスクロール位置に応じて、相対的な位置と固定的な位置が交互に入れ替わります。
スティッキー要素は、定義されたスクロール位置に到達するまではドキュメントフローに対して相対的です。その時点で、直接の親要素の中で固定された要素の動作に切り替わります。付箋が親の最下部に到達すると、スクロールが停止します。
スティッキー配置を有効にするには、top、bottom、left、right のいずれかに少なくとも 1 つの位置値を指定する必要があります。親要素の height や overflow が hidden、scroll、auto に設定されている場合、付箋の位置が正しく設定されないことがあります。
ブラウザによっては、スティッキー配置に対応していないものがあります。position:stickyに対応しているブラウザをご確認ください。
6.位置のコントロールと値
相対位置、絶対位置、固定位置、スティッキー位置のプロパティについては、スタイルパネルに以下のコントロールが用意されています。
- 位置決めコントロール
- 相対度インジケータ
- Z-index値フィールド
位置決めコントロール
絶対位置と固定位置を持つ要素については、相対性インジケータで示された要素に対する相対的な位置を指定できるプリセットが表示されます。
以下のプリセット位置のいずれかを選択することができます。
- 左上：次の値を設定します。0px - 左: 0px
- 右上：次の値を設定します。0px - 右: 0px
- 左下：次の値を設定します：bottom: 0px - 左: 0px
- Bottom right: 次の値を設定します。0px - 右: 0px
- 左：次の値を設定します： top: 0px - 左: 0px - 下: 0px。0px
- 右：次の値を設定します： top: 0px - 右：0px - 下：0px。0px
- Top: 次の値を設定します。0px - 左: 0px - 右: 0px
- Bottom: 次の値を設定します： bottom: 0px - 左: 0px - 右: 0px
- Full: 次の値を設定します: top:0px - bottom: 0px - 左: 0px - 右: 0px (相対的な親またはボディ全体をカバーする)
手動コントロールでは、上下左右のプリセット値または自動値を上書きすることができます。各辺の値は、コントロールをドラッグするか、クリックしてプリセット値を選択するか、カスタム値を入力することで変更できます。
- 上：値を大きくすると、要素が上から下に押し出されます。
- 左：値を大きくすると、要素が左から押されて右へ移動します。
- 右：これを増やすと、要素を右から押し出して左に移動します。
- 下：値を大きくすると、要素を下から上に押し上げます。
これらのいずれかに負の値を加えると、反対方向に移動し、親要素の境界から押し出される可能性があります。
相対性インジケーター
相対度インジケータは、選択した要素がどの要素から相対的に配置されているかを表示します。
- 相対配置に設定された要素は、それ自身に対して相対的に配置されることを覚えておいてください。
- 絶対配置に設定された要素は、親要素に対して相対的に配置されます。デフォルトでは、これはbody要素かもしれません。もし、ある要素を特定の親要素の中に絶対的に配置したい場合は、その祖先の位置を静的以外に変更してください。
- 固定要素は、ページ本体に対して相対的に配置され、ページがスクロールしてもその位置に留まります。
- スティッキー要素は、その直接の親要素に対して相対的な位置に配置されます。場合によっては、これがページ本体となります。
Zインデックス
Z-indexは、コンピュータの画面内外に伸びる仮想のZ軸上の要素の位置です。デフォルトでは、要素は自動Zインデックスを持ち、ページの下部にある要素はその上の要素より上に積み重なり、右側にある要素は左側の要素より上に積み重なります。静的要素は、位置が相対、絶対、固定、スティッキーに設定されている位置指定要素よりも常に下に積み重なります。
位置決めされた要素は、自然な文書の流れの中で他の要素と重なることがあります。したがって、位置決めされた要素のZ-index値を変更して、そのデフォルトの積み重ね順序を変更することができます。より高い値はより低い値の上に積み重ねられます。Z-indexの値は0から2147483647までの任意の整数です。負の値も使用できますが、要素がほとんどの要素の下にレンダリングされるため、要素の可視性が失われる可能性があります。
ネストされた要素の Z インデックス
z-indexがautoに設定されている場合、要素のスタック順はその親のスタック順と同じになります。これらの要素は、親要素に対して相対的に積み重ねることができますが、他の要素に対して親要素のz軸内にとどまります。例えば、要素Aのz-indexが要素Bより高い場合、要素Bのz-index値がどんなに高くても、要素Bの子要素が要素Aより高くなることはありません。
7.フロート設定
テキストを要素に回り込ませるには、要素を左または右にフロートさせます。要素をフロートさせるには、スタイルパネルで float left または float right プロパティを有効にします。
要素を左右にフロートさせることも、フロートさせないことも可能で、ページフローの中で自然な位置に保つことができます。
複数の要素をフロートさせると、それらの要素が横に並べられます。このレイアウト手法は、列、コレクション リスト、ナビ リンクなど、多くのネイティブ Web フロー コンポーネントで使用されています。また、フレックスボックスを使用しても、これらのレイアウトを実現できます。
フロート none
Noneはほとんどの要素のデフォルト設定であり、要素を通常のドキュメントフローに配置します。例えば、ある要素がより大きなブレークポイントから継承された浮動小数点数の設定を持っている場合、浮動小数点数をnoneに設定することでページ上の自然な位置を復元することができます。
左に配置
要素を左に浮かすと、親要素の中で左側に位置するようになります。また、この設定は、右または下の要素がクリアの設定を適用していない限り、その要素の真横に積み重なります。
右に浮動させる
要素を右に浮かせると、親要素の中で右側に位置するようになります。フローティング要素の直下にある長い段落やリッチテキストは、clear属性が設定されていない限り、その要素の周囲に回り込みます。
8.クリアの設定
要素に clear を設定すると、フローティングエレメントに回り込まないようにすることができます。この設定は、フローティングエレメントの下にスタックされているすべてのエレメントに適用することができますが、フローティングエレメント自体には適用することができません。
clearプロパティが設定された要素は、floatが望むようにfloatに隣接して上に移動することはなく、floatを越えて下に移動します。
clearを解除
Clear none は、ほとんどの要素のデフォルト設定です。clear nonに設定された要素は、ドキュメントフロー内でその真上にあるフローティング要素の隣に積み重ねられたり、その周囲に回り込んだりします。
ある要素に、より大きなブレークポイントなどから継承されたクリア設定がある場合、クリアを「なし」に設定することで、任意のクリア設定をクリアすることができます。
左クリア
Clear left は、左側に浮かんでいる要素への回り込みを防止します。
右クリア
Clear right は、右側に浮かんでいる要素の周囲に要素が回り込むのを防ぎます。
両方クリア
Clear both は、左右に浮遊している要素に関係なく、その要素が浮遊している要素に回り込まないようにします。