CSS 配置属性

次のトピックを探ります:

1. 場所規制
2. 対応する位置
3. 正確な位置決め
4. 変わらないポジショニング
5. 付属の位置決め
6. ポジションと属性の制御
7. フローティングセットアップ
8. 明確化設定

location 属性は、ページ上の要素の配置を決定します。要素の位置を決定したら、top、bottom、left、right の属性を微調整できます。

場所規制

すべての要素はデフォルトで固定配置になっているため、要素は document フローに従います。固定配置の要素は、積み重ねられた順序で表示されます。スタイルを追加しないと、要素は重なることはなく、さまざまな要素が異なるデフォルトの原則を持つこともありません。要素を固定として定義する唯一の目的は、適用された配置を削除することです。

対応する位置

対応するように設定された要素は、その通常の位置を基準にして配置されます。追加の配置属性 (上、左、下、右) が含まれていない対応する設定は変更されません。これは、固定として維持した場合とまったく同じように、対応する設定自体が対応するためです。対応する要素の上、右、下、左のプロパティを定義すると、その要素は通常の位置から移動します。異なるコンテンツは、要素によって残された隙間に収まるように調整されません。

対応する配置を持つ要素は、他の要素の配置に影響を与えたり、標準の document フローを妨げることなく、他の要素と重ねることができます。

要素に対応する位置を使用すると、他にもいくつかのことが起こります。

1. これは、その要素で Z 軸の使用を開始します。これは固定要素では機能しません。Z 軸の値を設定しなくても、この要素は、それが介在する他の固定要素よりも上に表示されます。Z 軸は、固定として指定されていないすべての要素で使用できます。 
2. 完全に配置済みの子要素を制限します。対応する要素の子として機能する要素、または固定以外の配置は、その要素内に正確に配置できます。 

Z 軸の値の適用についての理解を深めます。

正確な位置決め

標準の document フローから要素を移動するには、正確な配置が最適です。正確な要素の位置は他の要素の影響を受けず、他の要素の配置にも影響を与えません。 

デフォルトでは、要素の配置は body 要素を基準に行われますが、親が fixed 以外のものとして指定されている場合は、要素内に任意の要素を正確に配置できます。

配置属性の上、左、下、右を活用して位置を確立します。これらの値は、固定とは異なる構成を持つ最も近い親要素を基準とします。

変わらないポジショニング

変更されない要素は、ビューポートまたはブラウザ ウィンドウを基準に配置されます。

ページをスクロールしている間、変化しない要素は位置が固定されたままになります。この配置の選択は、安定したナビゲーションのためによく使用されます。

付属の位置決め

添付された要素は、閲覧者のスクロール位置に基づいて、対応する位置と変更されない位置の間で切り替わります。

アタッチされた要素は、定義されたスクロール レベルに到達するまで、document フローと関連しています。その時点で、アタッチされた要素は、その直下の親内の変更されていない要素の動作に切り替わります。アタッチされた要素が親のベースに到達すると、スクロールが停止します。

添付された配置が機能するには、上、下、左、または右の配置値を少なくとも 1 つ指定する必要があります。親要素に高さが設定されている場合や、オーバーフローが非表示、スクロール、または自動に指定されている場合、添付された位置は正確に機能しない可能性があります。

添付配置を推奨しないブラウザもいくつかあります。 添付された位置をどのブラウザが支持しているか確認する.

配置コントロールと値

対応する、正確な、不変の、添付された配置属性については、スタイル パネルに次のコントロールがあります。

• 配置コントロール
• 相関性指標
• Z軸値フィールド

配置コントロール

正確で変化しない位置を持つ要素の場合、相関性インジケーターで示される要素を基準にして要素を配置できるプリセットが表示されます。

以下のプリセット位置のいずれかを選択できます。

• 左上: 次のように値を指定します: 上: 0px、左: 0px
• 右上: 値は次のように示されます: 上: 0px、右: 0px
• 左下: 値を下: 0px、左: 0px に設定します。
• 右下: 値を下: 0px、右: 0px に設定します
• 左: 上: 0px、左: 0px、下: 0px のような値を割り当てます
• 右: 上: 0px、右: 0px、下: 0px などの値を割り当てます
• 上: 上: 0px、左: 0px、右: 0px などの値を設定します。
• 下: 値を下: 0px、左: 0px、右: 0px として定義します。
• フル: 上: 0px、下: 0px、左: 0px、右: 0px などの値を指定します (相対的な親または本体全体をカバーします)

手動コントロールを使用すると、上下左右などの各サイドのプリセットを変更したり、自動値に切り替えたりできます。コントロールを操作するか、タップしてプリセット値を選択するか、カスタム値を入力することで、各サイドの値を調整できます。

• 上: 値を大きくすると、要素が上から下へ押し出されます
• 左: 値を大きくすると、要素が左から右へ移動します
• 右: 値を大きくすると要素が右から左へ移動します
• 下: 値を大きくすると要素が下から上に移動します

これらのいずれかに負の値を使用すると、反対方向に移動し、親要素の境界を超えてシフトする可能性があります。

ポジショニングインジケーター

配置インジケーターは、選択した項目がどの要素に対して配置されているかを示します。

覚えておいてください、要素は 相対的 配置はそれ自体に対して相対的に行われます。

absolute に設定された要素は、親要素を基準として配置されます。デフォルトでは、これは body 要素になります。特定の親内の要素を絶対的に配置したい場合は、その前の要素の位置を static 以外の値に変更します。

あ 修理済み 要素はページ本体に対して相対的に配置され、ページをスクロールしても固定されたままになります。

固定要素は、その直下の親要素を基準として配置されます。場合によっては、これがページ本体になることもあります。

レイヤーインデックス

レイヤー インデックスは、コンピューター画面の内外に伸びる理論上の Z 軸上の要素の位置を表します。最初は、要素に自動レイヤー インデックスがあり、ページの下部にある要素は上にある要素の上に積み重ねられ、右側にある要素は左側にある要素の上に積み重ねられます。静的要素は、常に、相対、絶対、固定、またはスティッキー セットの位置が設定された配置済み要素の下に積み重ねられます。

配置された要素は、自然なフローで他の要素と重なる可能性があるため、配置された要素のレイヤー インデックス値を調整して、デフォルトの積み重ね順序を変更できます。値が大きいほど、値が低いものの上に積み重ねられます。レイヤー インデックス値の範囲は 0 ～ 2147483647 です。負の値も使用できますが、負の値を使用すると、要素が他のほとんどの要素の下にレンダリングされるため、要素の可視性が損なわれる可能性があります。

ネストされた要素のレイヤーインデックス

レイヤー インデックスが自動に設定されている場合、要素の配置順序は親の配置順序と一致します。これらの要素は親要素を基準に積み重ねることができますが、他の要素に関しては親要素の Z 軸内に留まります。たとえば、要素 A のレイヤー インデックスが要素 B よりも高い場合、要素 B のレイヤー インデックス値がどれだけ高くても、要素 B の子は要素 A を超えることはできません。

フローティング構成

テキストを要素の周りに折り返すには、要素を左または右にフロートします。これを実現するには、スタイル パネルで float left または float right プロパティを有効にします。

要素を左または右にフロートすることも、フロートしないこともできます。その場合、ページフローのデフォルトの位置が維持されます。

複数の要素をフローティングすると、それらを横に並べます。このレイアウト方法は、コレクションリストやナビゲーションリンクなどのさまざまなネイティブWebflow要素で利用されています。または、これらのレイアウトタスクを実現することもできます。 フレックスボックス付き.

フロートなし

None はほとんどの要素の標準設定として機能し、通常の document フロー内に要素を配置します。要素がより大きなブレークポイントなどからフロート設定を継承する場合は、フロートを none に設定することで、ページ上の自然な位置を復元できます。

左にフロート

要素を左にフローティングすると、親要素内で左揃えになります。また、明確な設定が適用されていない限り、要素は右または下に配置され、要素に直接隣接します。

右にフロート

要素を右にフローティングすると、親要素内で右揃えになります。フローティング要素の真下にある長い段落やリッチ テキストは、clear プロパティが設定されていない限り、その要素の周囲に折り返されます。

設定をクリアする

要素でクリアを有効にすると、その要素がフローティング要素を囲まないようになります。この設定は、フローティング要素の下にスタックされている任意の要素に実装できますが、フローティング要素自体には適用できません。

クリアプロパティが設定された要素は、フロートの希望どおりにフロートの横に上方に移動する代わりに、フロートを過ぎて下方に再配置されます。

クリアなし

「クリアなし」は、ほとんどの要素のデフォルト設定を表します。クリアなしが設定された要素は、フロー内でそのすぐ上にあるフローティング要素の隣に配置されるか、その周囲に回り込みます。

要素が、より大きなブレークポイントなどからクリア設定を継承する場合は、クリアを none に設定することで、既存のクリア設定をクリアできます。

左クリア

Clear Left は、要素が左に浮動する要素の周囲に折り返されるのを防ぎます。

クリア右

Clear Right は、要素が右に浮動する要素の周囲に折り返されることを禁止します。

両方クリア

「両方をクリア」は、左または右のどちらにフローティングしているかに関係なく、要素がフローティング要素の周囲にラップされるのを防ぎます。