皆さんこんにちは、私のブログへようこそ! ?

あなたが経験豊富な開発者であっても、CSS にまだ足を踏み入れているだけであっても、この記事は追加の知識と例を提供します。

CSS の配置の概要

CSS の配置により、要素がドキュメント フロー內(nèi)のどこに表示されるかが決まります。デフォルトでは、すべての要素は 左から右、上から下 という自然な流れに従います。これは 靜的配置

として知られています。ただし、CSS には、要素の配置をより創(chuàng)造的に制御できる他の 4 つの配置モードが用意されています。

靜的位置決め - デフォルトの動作

要素にposition: static (デフォルト) がある場合、ページの通常のフロー*に従って配置されます。これは、自然な文書構(gòu)造を超えた配置には特別な注意を払わずに、要素が次々と並んでいると考えてください。

例:

.static-element { position: static;}

通常のフロー: フロート、フレックスボックス、またはグリッドによって変更されない限り、要素は左から右、上から下に順番にレイアウトされます。

?知っておきたい

:

• ブロック要素

  : 新しい要素はそれぞれ最後の要素の下から始まり、垂直方向に積み重ねられます。

• インライン要素

  : 水平方向に流れ、コンテンツが必要とする幅のみを占めます。

相対的な位置決め - 視點(diǎn)の変化

相対配置

は、周囲のレイアウトを変更せずに、要素を通常の位置に対して相対的に移動します。これは、要素を元の位置から少しずらしながら、ドキュメント フロー內(nèi)のスペースを確保するようなものです。

例:

.relative-element {
    position: relative;
    top: 10px; /* Moves the element down by 10 pixels */
    left: 20px; /* Moves the element to the right by 20 pixels */
}

?知っておきたい

: 相対的な位置決めは簡単ですが、よく誤解されます:

• スペースを維持します

  : レイアウト內(nèi)の要素の元のスペースが維持されます。

• オフセット

  : 通常の位置から移動するには、上、右、下、左を使用します。

絶対的な位置決め - 自由な精神

絶対配置

は、ドキュメント フローから要素を完全に削除します。次に、最も近い位置にある祖先、または祖先が存在しない場合は、最初の包含ブロック (通常は 要素) を基準(zhǔn)にして配置します。

例:

.absolute-element {
    position: absolute;
    top: 50px;
    left: 50px;
}

?知っておきたいこと:

<script> // Detect dark theme var iframe = document.getElementById('tweet-1848997429565149264-1'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1848997429565149264&theme=dark" } </script>

• フローから削除: 他の要素の位置には影響しません。
• 配置された祖先を基準(zhǔn): 祖先が配置されていない場合、最初の包含ブロック (通常は ) に関連付けられます。

固定位置 - 畫面に固定

固定位置を持つ要素は、ビューポートを基準(zhǔn)にして配置されます。ページがスクロールされても動かないため、ナビゲーション バーやポップアップなどの要素に最適です。

例:

.static-element { position: static;}

?知っておきたいこと:

• スクロールしません: スクロール位置を無視して所定の位置に留まるため、ヘッダーや通知に最適です。

固定配置 - ユーザーのスクロールに適応する

スティッキー配置 は靜的なフローで開始されますが、スクロールのしきい値に達(dá)すると固定される可能性があります。スクロール中に表示したままにしておくヘッダーに最適です。

例:

.relative-element {
    position: relative;
    top: 10px; /* Moves the element down by 10 pixels */
    left: 20px; /* Moves the element to the right by 20 pixels */
}

?知っておきたいこと:

• 靜的に開始: しきい値に達(dá)するまで、その後固定になります。

よくある誤解とヒント

• 絶対位置の過度の使用: 絶対位置の過度の使用は、強(qiáng)力ではありますが、特にサイズが変更されるコンテンツや要素が予期せず重なる場合に、レイアウトの問題を引き起こす可能性があります。
• 位置指定を伴う Z インデックス: 配置された要素は z インデックスを使用して重なり順を制御できますが、z インデックスは配置された要素でのみ機(jī)能することに注意してください。
• 固定によるパフォーマンス: 固定要素が多すぎると、特に固定要素が適切にリフローしない可能性があるモバイル デバイスでパフォーマンスに影響を與える可能性があります。
• スクロール要素と固定要素: コンテンツを覆う可能性のある固定要素には注意してください。ユーザーがこれらの要素の背後にあるページを操作する方法を常に提供してください。

実際的な例

各配置タイプを示すレイアウトを作成してみましょう。

?CodePen でも例を見つけてください。

.absolute-element {
    position: absolute;
    top: 50px;
    left: 50px;
}

.fixed-element {
    position: fixed;
    bottom: 0;
    right: 0;
}

この例では、実際の各位置決め方法を紹介します。ウィンドウをスクロールしたりサイズ変更したりすると、要素の動作がどのように変化するかがわかります。

高度なテクニックと考慮事項(xiàng)

• Z-Index: 先ほども觸れましたが、もう少し詳しく見てみましょう。 Z インデックスは位置決めされた要素 (相対、絶対、固定) でのみ機(jī)能し、コンテキストを積み重ねると動作が複雑になる可能性があります。
• 位置の結(jié)合: 場合によっては、要素はさまざまな目的で相対位置と絶対位置の両方が必要になることがあります

• レスポンシブ デザイン: 畫面サイズごとに異なる位置がどのように動作するかを検討します。小さい畫面では重要なコンテンツが隠れてしまう可能性がある問題を修正しました。

• アクセシビリティ: 固定要素または固定要素がスクリーン リーダーやキーボード ナビゲーションを妨げないようにしてください。

実際のアプリケーションを使って練習(xí)する

スキルを練習(xí)したい場合は、次のようなものを構(gòu)築してみてください。

• ナビゲーション要素: 固定または固定のヘッダーまたはフッター。
• ツールチップまたはモーダル: 親コンテナを基準(zhǔn)にして絶対的に配置されます。
• 視差効果: 固定位置の背景とスクロール コンテンツを組み合わせます。

スティッキーヘッダーなど ~ 例

これは、ナビゲーション要素 (固定ヘッダー、固定フッター)、ツールチップ (絶対位置)、および単純な視差効果を示す例です。

?コード全體を検索し、Codepen で結(jié)果を確認(rèn)します。

CSS の配置テクニック ~ 例

以下の例は、HTML と CSS を使用したさまざまな CSS 配置テクニックを示しています。

?コード全體を検索し、Codepen で結(jié)果を確認(rèn)します。

.static-element { position: static;}

• 固定ヘッダー :
  
  位置を示します: スクロールに関係なくヘッダーをビューポートの上部に維持するように修正されました。

• 靜的要素 :
  
  通常のドキュメント フローで要素が表示されるデフォルトの位置を示します。

• 相対要素と絶対要素 :
  
  relative-box は相対位置を指定するコンテナであり、その中には絶対位置の要素があります。この構(gòu)造は、絶対要素が最も近い位置にある祖先 (この場合は相対ボックス) を基準(zhǔn)にしてそれ自體をどのように配置するかを示します。

• スティッキー要素 :
  
  位置: スティッキーを使用します。これは靜的に開始されますが、特定のスクロールしきい値に達(dá)すると固定されます。
  

.relative-element {
    position: relative;
    top: 10px; /* Moves the element down by 10 pixels */
    left: 20px; /* Moves the element to the right by 20 pixels */
}

• Body: スクロールできるように高い高さに設(shè)定します。これは、さまざまな配置タイプの効果を示すために必要です。

• 固定ヘッダー: 視認(rèn)性を高めるために青色の背景で常に上部に表示されるようにスタイル設(shè)定されています。

• コンテナ: コンテナ內(nèi)に配置された要素にコンテキストを提供します。

• 靜的、相対、絶対、スティッキー要素: それぞれには、位置決め動作を視覚的に區(qū)別するための個別のスタイルがあります:

• 通常のドキュメント フローでは靜的狀態(tài)が殘ります。

• 相対は通常の位置から微調(diào)整されますが、レイアウト內(nèi)の元のスペースを占有します。

• Absolute は相対ボックスを基準(zhǔn)にして配置されます。これは、配置された親內(nèi)で絶対配置がどのように機(jī)能するかを示しています。

• スティッキーは靜的に開始される場所から開始されますが、定義されたしきい値を超えてスクロールすると「固定」されます。

結(jié)論

これで完成です！これで、要素を正確に配置して、Web デザインを基本的なものから素晴らしいものに変えるための知識が身に付きました。練習(xí)すれば完璧になるということを忘れないでください。プロジェクトに飛び込んで、CSS の配置を試し始めてください。コーディングを楽しんでください!

---

?こんにちは、私はエレフテリアです。コミュニティ マネージャー開発者、講演者、コンテンツ作成者

です。

?この記事が気に入ったら、共有することを検討してください。

? すべてのリンク | X | LinkedIn

以上がCSS の配置: 要素の配置に関する究極のガイドの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。