CSS の配置: 要素の配置に関する究極のガイド-CSSチュートリアル-php.cn

CSS Positioning: Your Ultimate Guide to Element Placement

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

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

CSS の配置の概要

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

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

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

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

例:

.static-element { position: static;}

ログイン後にコピー

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

?知っておきたい

ブロック要素
: 新しい要素はそれぞれ最後の要素の下から始まり、垂直方向に積み重ねられます。
インライン要素
: 水平方向に流れ、コンテンツが必要とする幅のみを占めます。

相対的な位置決め - 視点の変化

相対配置

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

例:

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

ログイン後にコピー

?知っておきたい

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

スペースを維持します
: レイアウト内の要素の元のスペースが維持されます。
オフセット
: 通常の位置から移動するには、上、右、下、左を使用します。

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

絶対配置

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

例:

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

ログイン後にコピー

?知っておきたいこと:

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

固定位置 - 画面に固定

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

例:

.static-element { position: static;}

ログイン後にコピー

?知っておきたいこと:

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

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

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

例:

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

ログイン後にコピー

?知っておきたいこと:

静的に開始: しきい値に達するまで、その後固定になります。

よくある誤解とヒント

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

実際的な例

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

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

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

ログイン後にコピー

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

ログイン後にコピー

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

高度なテクニックと考慮事項

Z-Index: 先ほども触れましたが、もう少し詳しく見てみましょう。 Z インデックスは位置決めされた要素 (相対、絶対、固定) でのみ機能し、コンテキストを積み重ねると動作が複雑になる可能性があります。
位置の結合: 場合によっては、要素はさまざまな目的で相対位置と絶対位置の両方が必要になることがあります
レスポンシブデザイン: 画面サイズごとに異なる位置がどのように動作するかを検討します。小さい画面では重要なコンテンツが隠れてしまう可能性がある問題を修正しました。
アクセシビリティ: 固定要素または固定要素がスクリーンリーダーやキーボードナビゲーションを妨げないようにしてください。

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

スキルを練習したい場合は、次のようなものを構築してみてください。

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

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

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

?コード全体を検索し、Codepen で結果を確認します。

CSS の配置テクニック ~ 例

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

?コード全体を検索し、Codepen で結果を確認します。

.static-element { position: static;}

ログイン後にコピー

固定ヘッダー :

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

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

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

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

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

ログイン後にコピー