位置プロパティを使用して、さまざまなレイアウト効果を作成しますか？-CSSチュートリアル-php.cn

位置プロパティを使用して、さまざまなレイアウト効果を作成しますか？

CSSのpositionプロパティは、Webページ上の要素のレイアウトを制御するために使用される強力なツールです。要素が親コンテナまたはビューポート内にどのように配置されるかを指定することにより、さまざまなレイアウト効果を作成するために使用できます。 positionプロパティは、 static 、 relative 、 absolute 、 fixed 、およびstickyを含むいくつかの値を受け入れ、それぞれ異なるレイアウト動作を提供します。

静的：これは、あらゆる要素のデフォルトの位置です。静的な位置決めのある要素は、上部、下、左、または右の特性の影響を受けず、ドキュメントの通常の流れに従って配置されます。
相対：要素をposition: relative; 、 top 、 bottom 、 left 、およびrightプロパティを使用して、通常の位置からオフセットできます。要素は、まるで通常の位置にあるかのように、レイアウトでまだスペースを占有します。
絶対： position: absolute;最寄りの位置にある祖先に対して位置付けられています（固定のように、ビューポートに対して位置する代わりに）。絶対的な位置にある要素に位置付けられた祖先がない場合、ドキュメント本体を使用し、ページスクロールとともに移動します。
固定： position: fixed;ブラウザウィンドウに対して配置されています。ページがスクロールされ、通常のドキュメントフローから削除されたときに移動しません。
粘着性： position: sticky;相対的および固定ポジショニングのハイブリッドです。要素は、指定されたしきい値を通過するまでrelative位置として扱われ、その時点でfixed位置として扱われます。

これらの位置決め方法を使用して、オーバーラップ要素、固定ヘッダー、サイドバー、またはスクロール中にビューポートに固執する要素などの複雑なレイアウトを作成できます。たとえば、 absoluteポジショニングを使用して、ページコンテンツの中心に表示されるモーダルウィンドウ、またはスクロール時にビューポートの上部にあるナビゲーションバーのfixed位置を作成することができます。

CSSにおける絶対、相対、固定のポジショニングの重要な違いは何ですか？

CSSレイアウトの習得には、 absolute 、 relative 、 fixed位置決めの違いを理解することが重要です。

絶対的な位置付け：要素がposition: absolute; 、通常のドキュメントフローから削除されます。その位置は、最も近い位置にある祖先に対して決定されます。祖先要素にstatic以外の位置がない場合、要素は初期含有ブロック（通常はhtmlまたはbody要素）に対して配置されます。絶対的なポジショニングは、要素が重複するか、正確に配置される必要がある複雑なレイアウトを作成するのに役立ちます。
相対的なポジショニング： position: relative;通常のドキュメントフローにとどまります。ただし、 top 、 right 、 bottom 、およびleftプロパティを使用して、位置を調整できます。要素が通常の流れで占有していたスペースは保存されています。このタイプのポジショニングは、要素のレイアウトを微調整したり、絶対に配置された子供の要素のためのポジショニングコンテキストを作成するためによく使用されます。
固定位置決め： position: fixed;絶対的な位置付けと同様に、通常のドキュメントフローから要素を取り除きます。ただし、要素は、祖先の要素ではなく、ブラウザウィンドウに対して配置されています。これは、ページがスクロールされている場合でも、要素が同じ場所に残ることを意味します。固定ポジショニングは、固定ヘッダー、フッター、またはサイドバーを作成するために一般的に使用されます。

重要な区別は参照ポイントにあり、ドキュメントフローへの影響： absolute位置付けられた祖先を使用し、 relative要素の通常の位置を使用し、 fixedビューポートを使用します。それぞれに特定のユースケースがあり、目的のレイアウトを実現するために組み合わせることができます。

Z-Indexプロパティをポジショニングと組み合わせて使用して、どのように階層化要素を実現できますか？

Webページ上の要素の階層化には、 positionプロパティとz-indexプロパティの両方の使用が含まれます。 z-indexプロパティは、要素のスタック順序を指定し、要素が重複するときに他の要素の前または後ろに表示するかを決定します。

レイヤーを達成する方法は次のとおりです。

ポジショニング要素：まず、非静的な位置決め値（ relative 、 absolute 、 fixed 、またはsticky ）を使用してレイヤーする要素を配置する必要があります。配置された要素のみがz-indexプロパティを設定できます。
Z-Indexの適用：要素が配置されたら、 z-indexプロパティを使用してスタッキング順序を制御できます。 z-index値は、正または負の整数になります。 z-index値が高い要素はz-index値が低い要素の前に表示されます。
```
 <code class="css">.element1 { position: absolute; z-index: 1; } .element2 { position: absolute; z-index: 2; }</code>
```
ログイン後にコピー
この例では、 .element2が.element1の前に表示されます。
スタッキングコンテキストの理解： z-index 、特定のスタッキングコンテキスト内でのみ適用されます。要素が異なるスタッキングコンテキストにある場合、それらのz-index値はそれらのコンテキスト内でのみ比較されます。新しいスタッキングコンテキストは、配置された要素によって作成され、他のプロパティの中でも、 auto以外のz-index値を持つ要素によって作成されます。

positionとz-index慎重に管理することにより、ドロップダウンメニュー、モーダルダイアログ、階層化された画像ギャラリーなどの複雑な層状設計を作成できます。

対応性のあるデザインを作成するためにポジショニングを使用できますか？

はい、ポジショニングは実際にレスポンシブデザインを作成するために使用できますが、最良の結果を得るには、他のCSS技術と組み合わせる必要があります。ここに、ポジショニングがレスポンシブデザインに貢献できる方法があります。

メディアクエリ：メディアクエリを使用して、さまざまな画面サイズに基づいてpositionプロパティを調整できます。たとえば、サイドバーは大きな画面にfixedが、小さな画面ではstaticなる可能性があります。
```
 <code class="css">@media (max-width: 768px) { .sidebar { position: static; } }</code>
```
ログイン後にコピー
柔軟なグリッドとポジショニング：ポジショニングと柔軟なグリッドシステム（CSSグリッドやフレックスボックスなど）を組み合わせて、画面サイズに関係なく要素が適切に配置されたままであることを確認できます。たとえば、フレックスコンテナ内のabsolute位置決めを使用して、応答性を維持しながら要素を正確に整列させることができます。
相対的なサイジング： top 、 right 、 bottom 、およびポジショニングでleftを使用する場合、レイアウトが異なるビューポートサイズに適応するように、固定ユニットの代わりにパーセンテージを使用することを検討してください。
```
 <code class="css">.element { position: absolute; top: 10%; right: 20%; }</code>
```
ログイン後にコピー
レスポンシブナビゲーションの粘着性のあるポジショニング： position: sticky;より大きな画面のビューポートの上部に固執するが、小さな画面では異なる動作をする可能性があるレスポンシブヘッダーまたはナビゲーションバーを作成するのに特に役立ちます。
重複する要素： absoluteまたはfixed位置決めを使用することにより、画像ギャラリーやカルーセルなどのさまざまな画面サイズに適応する重複する要素を作成できます。