CSSの4種類の配置の違いの詳細な説明

フロントエンド開発でよく使われるCSSの配置方法は、

位置決めには、通常位置決め、相対位置決め、絶対位置決め、固定位置決めの 4 種類があります。

しかし、基礎知識のないフロントエンド初心者の多くは、これら 4 つの位置決め方法の機能と違いを知らず、使用時に柔軟性に欠けています。Web ページのレイアウトをうまく行いたい場合、これら 4 つの位置決め方法が重要だということを知っておく必要があります。位置決めとレイアウトをしっかり学べば、フロントエンドの開発は簡単になります。

そこで今日は、CSS におけるこれら 4 種類の配置の機能と違いについて説明します。これら 4 つのレイアウトのすばらしい使い方をみんなに理解してもらいましょう。

1. 静的ポジショニング

当社の開発プロセスでは、特に指定がない限り、すべてのボックスは共通フローに配置されます。通常フローにおける要素のボックスの位置は、(X)HTML における要素の位置によって決まります。ブロックレベル要素は上から下に配置され、ボックス間の垂直距離はボックスの垂直余白によって計算されます。インライン要素は一列に水平に配置されます。これについては詳しく説明しません。

2. 相対的な位置付け

私たちのフロントエンド開発では、相対的な配置は常に通常のドキュメント フロー配置モデルの一部と見なされ、配置された要素の位置は通常のフローでの位置を基準に移動されます。相対配置を使用する要素は、移動されたかどうかに関係なく、元の位置を占め続けます。要素を移動すると、他のボックスが覆われてしまいます。

結果

3. 絶対位置指定

フロントエンド開発では、最も近い位置にある親要素を基準とします。最も近い位置にある親要素がない場合、その位置は最初の包含ブロック (body など) を基準とします。絶対配置されたボックスは、それを含むブロックから上、右、下、または左に移動できます。

結果

4. 固定位置

ブラウザ ウィンドウを基準にすると、残りの特性は絶対配置と同様になります。固定要素は、ブラウザ内の特定の位置に固定されている要素です。絶対位置に配置された要素はページに固定されています。スクロール バーをスクロールすると、絶対位置に配置された要素も上にスクロールしますが、固定要素はスクロールしません。

やっと

これらの配置方法にはそれぞれ利点があります。多くの初心者は、ページを書くときに、これらの 4 つのレイアウト方法のどれを使用すればよいのか、とよく尋ねます。 （この質問はとても単純に聞こえます）

最後に、現在のプロのフロントエンド開発作業で最もよく使用されているのは絶対位置決めでも相対位置決めでもなく、絶対位置決めと相対位置決めの組み合わせであることをお伝えします。 (小白: 何ですって? フュージョン?)

この組み合わせによって、新たな位置決め方法が生まれるわけではありません。代わりに、フロントエンド開発におけるレイアウト記述仕様を参照します。

親子絶対 (つまり、親要素は相対配置を使用し、子要素は絶対配置を使用し、それらを組み合わせてレイアウトを実現します。)

このレイアウト仕様は、現段階ではフロントエンド開発で認められたレイアウト方法であり、多くのエラーを回避することもできます。

CSSの4種類の配置についての詳細説明は以上です。CSSの配置4種類の違いについて詳しく知りたい方は、123WORDPRESS.COMの過去記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。