CSSでは、静的(デフォルト)配置と相対配置の違いは何ですか?
回答:
静的配置は、要素のデフォルトの配置モデルです。それらは、通常のHTMLフローの一部としてレンダリングされたページに表示されます。静的に配置要素は従わないleft
、top
、right
およびbottom
ルール:
相対的な位置を使用すると、特定のオフセット(指定することができleft
、top
HTMLの流れにおける要素の通常の位置に相対的であるなど)。したがって、テキストボックスが内部にある場合は、テキストボックスにdiv
相対位置を適用して、通常はdiv
:内に配置される場所を基準にして特定の場所に表示することができます。
絶対配置もあります。これにより、ドキュメント全体に対する要素の正確な位置、または要素ツリーのさらに上にある次の相対配置要素を指定できます。
そして、aposition: relative
が階層内の親要素に適用される場合:
絶対位置の要素が相対位置の要素によってどのようにバインドされているかに注意してください。
そして最後に修正されました。固定位置は、要素をビューポート内の特定の位置に制限し、スクロール中にその位置に留まります。
また、固定位置の要素はビューポートにバインドされているとは見なされないため、スクロールが発生しないという動作が見られる場合があります。
絶対位置の要素は引き続きビューポートによってバインドされ、スクロールが発生します。
..もちろん、親要素overflow: ?
がスクロールの動作を決定するために使用する場合を除きます(存在する場合)。
絶対配置と固定配置では、要素はHTMLフローから取り出されます。
static
とrelative
要素は同じですが、後者の場合、含まれている要素ではなく、元の位置を基準にして再配置できます。ここで使用できます。absolute
また、static
を使用できる以外の値を使用して配置された要素と同様ですz-index
。
position: static;
で単に置き換えるのではなく、なぜまだ実装するのだろうかposition: relative;
?1は、位置以外の項目に望んでいない場合top: 0;
やleft: 0;
、その後のは、右のそれを行うわけにはいきませんか?position: static;
CSSの一部としてまだ必要な根本的な理由はありますか?
ここで簡単な概要を見ることができます:W3School
また、正しく思い出せば、相対的な要素を宣言すると、デフォルトではそうでない場合と同じ場所にとどまりますが、この要素に対して要素を絶対的に配置する機能が得られます。これは非常に便利です。過去には。
「CSSがまだposition:staticを実装する理由」への回答。1つのシーンでは、親にposition:relativeを使用し、子にposition:absoluteを使用すると、子のスケーリング幅が制限されます。リンクの「列」を持つことができる水平メニューシステムでは、「width:auto」を使用しても相対的な親では機能しません。この場合、それを「静的」に変更すると、幅は内部のコンテンツに応じて可変になります。
コンテナ内のコンテンツの量に基づいてコンテナを調整できないのはなぜかと、数時間かけて考えました。お役に立てれば!
相対位置では、上/下/左/右を使用して配置できます。マージンパラメータを使用しない限り、Staticではこれを実行できません。トップとマージントップには違いがあります。
デフォルトであるため、staticをあまり使用する必要はありません。
相対位置は、通常の流れを基準にしています。その要素の相対位置(オフセットあり)は、移動しなかった場合にその要素が通常移動していた位置を基準にしています。
staticとrelativeは位置属性です。relativeは多くの用途に使用されます。1つではありません。ただし、静的および相対的なものは、Htmlの通常のドキュメントフローに害を及ぼさないことに注意してください。staticは、要素をHtmlに書き込むときのデフォルトの位置です。要素に相対位置がある場合、その要素はその本来の場所を基準にして配置できます。小さなスペースから要素を調整する場合は、相対位置を使用して、要素に相対位置があり、子要素がある場合にマージンやパディングなどを追加する必要がないようにします。ここでは、親に対して相対的な測定を行うことができます。子にwidth10%を追加すると、つまり(width + padding)x10%になりますが、relativeキーワードを追加しないと、widthx10%になります。それ以外に、親戚の最も重要な使用法は次のとおりです。その上に任意の要素を配置できます。
position: relative
、入力しないことですposition: static
:)