CSSでは、静的(デフォルト)ポジショニングと相対ポジショニングの違いは何ですか?
静的位置決めは、要素のデフォルトの位置決めモデルです。それらは、通常のHTMLフローの一部としてレンダリングされたページに表示されます。静的に配置された要素は、left
、top
、right
、およびbottom
の規則に従いません。
相対配置では、HTMLフロー内の要素の通常の位置に相対的な特定のオフセット(left
、top
など)を指定できます。したがって、div
内にテキストボックスがある場合は、テキストボックスに相対配置を適用して、通常div
内に配置される場所を基準にして特定の場所に表示することができます。
また、絶対配置もあります。これにより、ドキュメント全体に対する要素の正確な位置を指定しますまたは要素ツリーのさらに上にある次の相対的に配置された要素:
そして、position: relative
は、階層内の親要素に適用されます。
絶対位置要素がどのように相対位置要素にバインドされているかに注意してください。
そして最後に修正されました。固定配置により、要素はビューポート内の特定の位置に制限され、スクロール中はそのままになります。
また、固定位置の要素はビューポートによってバインドされていると見なされないため、スクロールを引き起こさないという動作を観察することもできます。
一方、絶対位置の要素はビューポートによってバインドされたままであり、スクロールが発生します。
..もちろん、親要素がoverflow: ?
スクロールの動作を決定します(ある場合)。
絶対配置と固定配置では、要素はHTMLフローから取り出されます。
ここで簡単な概要を見ることができます: W3School
また、私が正しく思い出すと、相対要素を宣言するとき、デフォルトではそうでない場合と同じ場所に留まりますが、この要素に対して要素を絶対的に配置する能力を得ることができます。これは非常に便利です過去には。
相対位置では、上/下/左/右を使用して配置できます。余白パラメータを使用しない限り、Staticではこれを実行できません。 Topとmargin-topには違いがあります。
デフォルトのままで静的を使用する必要はありません。
「CSSがなぜposition:static;を実装するのか」に対する回答あるシーンでは、親にposition:relativeを、子にposition:absoluteを使用すると、子のスケーリング幅が制限されます。リンクの「列」を使用できる水平メニューシステムでは、「width:auto」を使用しても、相対的な親では機能しません。この場合、「静的」に変更すると、幅が内部のコンテンツに応じて可変になります。
コンテナ内のコンテンツの量に基づいてコンテナを調整できないのはなぜかと思いながら、数時間を費やしました。お役に立てれば!
Matthew Abbott には本当に良い答えがあります。
絶対および相対配置アイテムは、静的配置アイテムではないtop
、left
、right
、およびbottom
コマンド(オフセット)に従います。
相対的に配置されたアイテムは、通常のHTMLの位置からオフセットを移動します。
絶対配置されたアイテムは、ドキュメントまたはDOMツリーの次の相対的に配置された要素からオフセットを移動します。
相対位置は、通常の流れに対して相対的です。その要素の相対位置(オフセットあり)は、その要素が移動されなかった場合の通常の位置に相対的です。
静的:静的に配置された要素は、DEFAULT(オブジェクトの通常の配置)によって得られるものです。
相対:現在の位置に相対的ですが、移動できます。または、相対配置要素がITSELFに対して配置されます。