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


89

CSSでは、静的(デフォルト)配置と相対配置の違いは何ですか?


21
違いは、頻繁に入力しposition: relative、入力しないことですposition: static:)
30dot 2011

回答:


168

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


4
良い答えですが、(相対位置の場合)オフセットは要素の通常の位置に基づいていませんか?
バズトゥーン2011

4
私はBaztouneに同意します、比較的配置された要素のこの定義は誤解を招くものです。Astaticrelative要素は同じですが、後者の場合、含まれている要素ではなく、元の位置を基準にして再配置できます。ここで使用できます。absoluteまた、staticを使用できる以外の値を使用して配置された要素と同様ですz-index
ライアンウィリアムズ

この回答を作り直して、相対的な位置をより正確に定義し、さまざまな位置タイプを示すために画像を含めました。
マシューアボット

3
CSSがデフォルトposition: static;で単に置き換えるのではなく、なぜまだ実装するのだろうかposition: relative;?1は、位置以外の項目に望んでいない場合top: 0;left: 0;、その後のは、右のそれを行うわけにはいきませんか?position: static;CSSの一部としてまだ必要な根本的な理由はありますか?
cram2208 2015

8
@ cram2208は、relativeによって子の絶対位置ノードが相対位置に配置されるため、staticでは、絶対位置の子が自分の位置を無視して、最も近い相対位置の要素に対して相対位置に配置されます。その重要な概念
Felype 2017

7

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

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


29
w3schools ...私はこれに反対票を投じませんが、あなたは恥をかいて生きなければなりません。
Myles Grey

4
一方、2017年には、W3Schoolsは以前ほど悪くはありませんでした(まだ完璧ではありませんが、コミュニティの反発を真剣に受け止め、実際に改善されました)。
Priidu Neemre 2017

一方、2018年にかけて、W3Schoolsは以前ほど悪くはありませんが、今日でも他の開発者に上記の最初のコメントを言及することで、古典的な笑い声が聞こえるほどの評判であることに不満を感じています...私の一日で... W3School ....ちょっと...第一印象
redfox05

7

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

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


これが答えです!誰もがプロに相対的な位置付けについてのみ話し、このような質問の要点を見逃しています:違いは何ですか?
バルティスアロン

5

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

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


2

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


2

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

絶対的および相対的位置付け項目が従うtopleftrightおよびbottom静的に配置項目がないコマンド(オフセット)。

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

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


0

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

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


0

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.