web-dev-qa-db-ja.com

静的位置決めと相対位置決めの違い

CSSでは、静的(デフォルト)ポジショニングと相対ポジショニングの違いは何ですか?

78
jrdioko

静的位置決めは、要素のデフォルトの位置決めモデルです。それらは、通常のHTMLフローの一部としてレンダリングされたページに表示されます。静的に配置された要素は、lefttopright、およびbottomの規則に従いません。

statically-positioned elements obey normal HTML flow.

相対配置では、HTMLフロー内の要素の通常の位置に相対的な特定のオフセット(lefttopなど)を指定できます。したがって、div内にテキストボックスがある場合は、テキストボックスに相対配置を適用して、通常div内に配置される場所を基準にして特定の場所に表示することができます。

relatively-positioned elements obey HTML flow, but provide the ability to adjust their position relative to their normal position in HTML flow.

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

absolutely-positioned elements are taken out of HTML flow and can be positioned at a specific place in the document...

そして、position: relativeは、階層内の親要素に適用されます。

...or positioned relative to the first parent element in the HTML tree that is relatively positioned.

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

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

fixed-positioned elements are also taken out of HTML flow, but are not bound by the viewport and will not scroll with the page.

また、固定位置の要素はビューポートによってバインドされていると見なされないため、スクロールを引き起こさないという動作を観察することもできます。

fixed-positioned elements have no effect on scroll.

一方、絶対位置の要素はビューポートによってバインドされたままであり、スクロールが発生します。

absolutely-positioned elements are still affected by the boundaries of the viewport, unless overflow is used on a parent element.

..もちろん、親要素がoverflow: ?スクロールの動作を決定します(ある場合)。

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

149
Matthew Abbott

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

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

7
Stoffe

相対位置では、上/下/左/右を使用して配置できます。余白パラメータを使用しない限り、Staticではこれを実行できません。 Topとmargin-topには違いがあります。

デフォルトのままで静的を使用する必要はありません。

5
Undefined

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

コンテナ内のコンテンツの量に基づいてコンテナを調整できないのはなぜかと思いながら、数時間を費やしました。お役に立てれば!

4
user3233352

Matthew Abbott には本当に良い答えがあります。

絶対および相対配置アイテムは、静的配置アイテムではないtopleftright、およびbottomコマンド(オフセット)に従います。

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

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

2
Connor Leech

相対位置は、通常の流れに対して相対的です。その要素の相対位置(オフセットあり)は、その要素が移動されなかった場合の通常の位置に相対的です。

2

静的:静的に配置された要素は、DEFAULT(オブジェクトの通常の配置)によって得られるものです。

相対:現在の位置に相対的ですが、移動できます。または、相対配置要素がITSELFに対して配置されます。

0
Arif