静的配置と相対配置の違い

Question 1

CSSでは、静的（デフォルト）配置と相対配置の違いは何ですか？

Question 2

静的配置は、要素のデフォルトの配置モデルです。それらは、通常のHTMLフローの一部としてレンダリングされたページに表示されます。静的に配置要素は従わないleft、top、rightおよびbottomルール：

静的に配置された要素は、通常のHTMLフローに従います。

相対的な位置を使用すると、特定のオフセット（指定することができleft、topHTMLの流れにおける要素の通常の位置に相対的であるなど）。したがって、テキストボックスが内部にある場合は、テキストボックスにdiv相対位置を適用して、通常はdiv：内に配置される場所を基準にして特定の場所に表示することができます。

比較的配置された要素はHTMLフローに従いますが、HTMLフローの通常の位置を基準にして位置を調整する機能を提供します。

絶対配置もあります。これにより、ドキュメント全体に対する要素の正確な位置、または要素ツリーのさらに上にある次の相対配置要素を指定できます。

絶対位置の要素はHTMLフローから取り出され、ドキュメント内の特定の場所に配置できます。

そして、aposition: relativeが階層内の親要素に適用される場合：

...または、比較的配置されているHTMLツリーの最初の親要素を基準にして配置されます。

絶対位置の要素が相対位置の要素によってどのようにバインドされているかに注意してください。

そして最後に修正されました。固定位置は、要素をビューポート内の特定の位置に制限し、スクロール中にその位置に留まります。

固定位置の要素もHTMLフローから削除されますが、ビューポートにバインドされず、ページとともにスクロールしません。

また、固定位置の要素はビューポートにバインドされているとは見なされないため、スクロールが発生しないという動作が見られる場合があります。

固定位置の要素はスクロールに影響を与えません。

絶対位置の要素は引き続きビューポートによってバインドされ、スクロールが発生します。

親要素でオーバーフローが使用されていない限り、絶対位置の要素は引き続きビューポートの境界の影響を受けます。

..もちろん、親要素overflow: ?がスクロールの動作を決定するために使用する場合を除きます（存在する場合）。

絶対配置と固定配置では、要素はHTMLフローから取り出されます。

Question 3

ここで簡単な概要を見ることができます：W3School

また、正しく思い出せば、相対的な要素を宣言すると、デフォルトではそうでない場合と同じ場所にとどまりますが、この要素に対して要素を絶対的に配置する機能が得られます。これは非常に便利です。過去には。

Question 4

「CSSがまだposition：staticを実装する理由」への回答。1つのシーンでは、親にposition：relativeを使用し、子にposition：absoluteを使用すると、子のスケーリング幅が制限されます。リンクの「列」を持つことができる水平メニューシステムでは、「width：auto」を使用しても相対的な親では機能しません。この場合、それを「静的」に変更すると、幅は内部のコンテンツに応じて可変になります。

コンテナ内のコンテンツの量に基づいてコンテナを調整できないのはなぜかと、数時間かけて考えました。お役に立てれば！

Question 5

相対位置では、上/下/左/右を使用して配置できます。マージンパラメータを使用しない限り、Staticではこれを実行できません。トップとマージントップには違いがあります。

デフォルトであるため、staticをあまり使用する必要はありません。

Question 6

相対位置は、通常の流れを基準にしています。その要素の相対位置（オフセットあり）は、移動しなかった場合にその要素が通常移動していた位置を基準にしています。

Question 7

マシューアボットは本当に良い答えを持っています。

絶対的および相対的位置付け項目が従うtop、left、rightおよびbottom静的に配置項目がないコマンド（オフセット）。

相対的に配置されたアイテムは、通常html内の場所からオフセットを移動します。

絶対位置のアイテムは、ドキュメントまたは次に相対位置にある要素からDOMツリーの上のオフセットに移動します。

Question 8

静的：静的に 配置された要素は、DEFAULT（オブジェクトの通常の配置）によって取得されるものです。

相対： 現在の位置を基準にしていますが、移動できます。または、相対配置要素がITSELFを基準にして配置されます。

Question 9

staticとrelativeは位置属性です。relativeは多くの用途に使用されます。1つではありません。ただし、静的および相対的なものは、Htmlの通常のドキュメントフローに害を及ぼさないことに注意してください。staticは、要素をHtmlに書き込むときのデフォルトの位置です。要素に相対位置がある場合、その要素はその本来の場所を基準にして配置できます。小さなスペースから要素を調整する場合は、相対位置を使用して、要素に相対位置があり、子要素がある場合にマージンやパディングなどを追加する必要がないようにします。ここでは、親に対して相対的な測定を行うことができます。子にwidth10％を追加すると、つまり（width + padding）x10％になりますが、relativeキーワードを追加しないと、widthx10％になります。それ以外に、親戚の最も重要な使用法は次のとおりです。その上に任意の要素を配置できます。